图片预加载 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{
                width: 500px;
            }
        </style>
        <script>
            window.onload=function(){
                var oImg=document.getElementById("img1");
                var oImage=new Image();
                var arr=[
                    "https://b-ssl.duitang.com/uploads/item/201204/30/20120430145249_EKukF.jpeg",
                    "http://bbs.crsky.com/1236983883/Mon_1201/25_184488_fdcdcd3786a5249.jpg",
                    "http://i1.3conline.com/images/piclib/201202/03/batch/1/125611/1328199597420uwy3cigff7.jpg",
                    "http://img.zcool.cn/community/01585359400653a8012193a37ce62a.jpg",
                    "http://img18.3lian.com/d/file/201709/21/d8768c389b316e95ef29276c53a1e964.jpg",
                    "http://img02.hc360.com/cloth/201411/201411271645252552.jpg",
                    "http://i.shangc.net/allimg/150117/65-15011G95445.jpg"
                ]
                var iCur=0;
                var i=0;
                xunlei();
                oImg.onclick=function(){
                    i++;
                    if(i<arr.length){
                        oImg.src=arr[i];
                    }
                }
                function xunlei(){
                    oImage.src=arr[iCur];
                    oImage.onload=function(){
                        iCur++;
                        if(iCur<arr.length){
                            xunlei();//递归
                        }
                        document.title=iCur+"/"+arr.length;
                    }
                }
            }
        </script>
    </head>
    <body>
        <img id="img1" src="http://img.xsee.cc/upload/album/2015/08/29/26183eb3-b89d-4dc0-a623-b6a60df4f0e4-1200x671.jpg" />
    </body>
</html>

 

posted @ 2019-01-07 21:10  webxy  阅读(189)  评论(0)    收藏  举报