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

最新推荐文章于 2024-04-10 18:37:25 发布

放肆青春的博客

最新推荐文章于 2024-04-10 18:37:25 发布

阅读量2k

点赞数

分类专栏：前端

前端专栏收录该内容

43 篇文章 3 订阅

订阅专栏

1、延迟加载即懒加载，主要目的是作为服务器前端的优化，减少请求数或延迟请求数，在一些图片非常多的网站中非常有用，当图片位置进入到可视区的时候才会被加载，这样对于含有很多 图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽
最常用的方式是：监控滚动条的高度，当滚动条高度和可视区高度之和小于图片位置距离页面的高度时会被加载
2、预加载：在查看前面张图片的时候加载后面的图片，在提升用户体验的同时会增加服务器的压力
常用方式：创建image对象，通过src属性加载url资源，当资源加载完成后，资源会被放在缓存中，当再次调用url的时候从缓存中读取
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力
 
懒加载：
 
 
   
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
            #list{width: 1250px;margin: 100px auto 0;}
            li{float:left;width: 300px;height: 400px;border: 1px solid #999;margin: 10px 0 10px 10px;}
            img{width: 100%;height: 100%;}
        </style>
        <script type="text/javascript" src="../js/rainbow.js"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("list");
                var aImg=oUl.getElementsByTagName('img');
                function showImg(){
                    for(var i=0;i<aImg.length;i++){
                        var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                        //先判断图片之前是否被加载，能省去计算高度之和
                        if(!aImg[i].isLoad && getPos(aImg[i]).top<scrollTop +document.documentElement.clientHeight){
                            aImg[i].src=aImg[i].getAttribute('_src');
                            //通过这个自定义属性设置查看过的图片不重新加载
                            aImg[i].isLoad=true;
                            //console.log(i);
                        }
                    }
                }
                showImg();
                window.onscroll=function(){
                    showImg();
                }
            }
        </script>
    </head>
    <body>
        <ul id="list">
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            
        </ul>
    </body>
</html>
预加载：通过创建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> 
    
  

转载来自：http://www.cnblogs.com/rain92/p/6100709.html

放肆青春的博客

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网站优化--图片的预加载与懒加载（上）

1、延迟加载即懒加载，主要目的是作为服务器前端的优化，减少请求数或延迟请求数，在一些图片非常多的网站中非常有用，当图片位置进入到可视区的时候才会被加载，这样对于含有很多图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽最常用的方式是：监控滚动条的高度，当滚动条高度和可视区高度之和小于图片位置距离页面的高度时会被加载2、预加载：在查看前面张图片的时候加载后面的图片，在提升用户体验的同时...
复制链接

扫一扫