码迷,mamicode.com
首页 > Web开发 > 详细

网站优化--图片的预加载与懒加载(下)

时间:2016-11-25 11:55:38      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:nload   资源   var   cti   创建   nbsp   styles   onclick   cli   

预加载:通过创建image对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <script type="text/javascript" src="../js/rainbow.js"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oImg=document.getElementById("img");
                var oImage=new Image();
                var arr=[
                    ../img/hd1.jpg,
                    ../img/hd2.jpg,
                    ../img/hd3.jpg,
                    ../img/hd4.jpg,
                    ../img/hd5.jpg,
                    ../img/hd6.jpg,
                    ../img/hd7.jpg,
                    ../img/hd8.jpg                    
                ];
                var iCur=0;
                var i=0;
                show();
                function show(){
                    //通过src属性将url资源加载完成并存放在本地缓存中
                    oImage.src=arr[iCur];
                    oImage.onload=function(){
                        iCur++;
//                        console.log(iCur);
                        if(iCur<arr.length){
                            show();
                        }
//                        document.title=iCur+‘/‘+arr.length;
                    }
                }
                oImg.onclick=function(){
                    i++;
                    oImg.src=arr[i%arr.length];
                }
            }
        </script>
    </head>
    <body>
        <img src="../img/hd1.jpg" id=‘img‘/>
    </body>
</html>

 

网站优化--图片的预加载与懒加载(下)

标签:nload   资源   var   cti   创建   nbsp   styles   onclick   cli   

原文地址:http://www.cnblogs.com/rain92/p/6100720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!