网站优化--图片的预加载与懒加载（下）

Posted rain92

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站优化--图片的预加载与懒加载（下）相关的知识，希望对你有一定的参考价值。

预加载：通过创建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>

 

以上是关于网站优化--图片的预加载与懒加载（下）的主要内容，如果未能解决你的问题，请参考以下文章

图片预加载与懒加载

页面图片预加载与懒加载

图片的预加载之无序加载

进一步优化SPA的首屏打开速度（模块化与懒加载） by 嗡

Javascript实现图片的预加载的完整实现

Javascript实现图片的预加载的完整实现