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

时间 2019-11-18
原文原文链接
一、延迟加载即懒加载，主要目的是做为服务器前端的优化，减小请求数或延迟请求数，在一些图片很是多的网站中很是有用，当图片位置进入到可视区的时候才会被加载，这样对于含有不少 图片的比较长的网页来讲，能够加载的更快，而且还能节省服务器带宽javascript
最经常使用的方式是：监控滚动条的高度，当滚动条高度和可视区高度之和小于图片位置距离页面的高度时会被加载css
二、预加载：在查看前面张图片的时候加载后面的图片，在提高用户体验的同时会增长服务器的压力html
经常使用方式：建立image对象，经过src属性加载url资源，当资源加载完成后，资源会被放在缓存中，当再次调用url的时候从缓存中读取前端
两种技术的本质：二者的行为是相反的，一个是提早加载，一个是迟缓甚至不加载。懒加载对服务器前端有必定的缓解压力做用，预加载则会增长服务器前端压力java
 
懒加载：web
 
 
 <!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> 