首页 > 代码库 > 网站优化--图片的预加载与懒加载（下）

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

2024-08-23 03:47:32   222人阅读

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

 

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


联系
我们