图片懒加载

痛定思痛。 2022-06-04 07:58 526阅读 0赞

## 懒加载的意义[（在线demo预览）][demo] ##

尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是如果图片太多还是会影响页面的加载速度，快则几十秒慢则几十分钟，这样会导致用户流失。

图片的加载对页面的加载速度有很大影响！！所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验，即图片赖加载~

## 原理 ##

将页面中的img标签src指向一张小图片或者src为空，然后定义`data-src`（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。

当载入页面时，先把可视区域内的img标签的`data-src`属性值负给`src`，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片赖加载</title>
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        
        <meta name="apple-mobile-web-app-capable" content="yes">
        
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        
        <meta name="format-detection" content="telephone=no">
        
        <meta http-equiv="Expires" content="-1">
        
        <meta http-equiv="Cache-Control" content="no-cache">
        
        <meta http-equiv="Pragma" content="no-cache">
        <meta name="applicable-device" content="mobile">
        
        <meta content="" name="keywords">
        <meta name="description" content="">
        <link rel="stylesheet" href="css/img_lazy.css">
    </head>
    <body>
        <div class="main">
            <img src="" data-src="images/1.jpg" alt="">
            <img src="" data-src="images/2.jpg" alt="">
            <img src="" data-src="images/3.jpg" alt="">
            <img src="" data-src="images/4.jpg" alt="">
            <img src="" data-src="images/5.jpg" alt="">
            <img src="" data-src="images/6.jpg" alt="">
            <img src="" data-src="images/7.jpg" alt="">
            <img src="" data-src="images/8.jpg" alt="">
        </div>
    
        <script src="js/imgLazyLoad.js"></script>
    </body>
    </html>

![复制代码][copycode.gif]

*{
       
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        border: 0;
        outline: 0;
    }
    .main{
       
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
    }
    img{
       
        display: block;
        width: 100%;
        height: 640px;
    }

![复制代码][copycode.gif]

/**
     * Created by Administrator on 2016/11/28.
     */
    !function(){
        var imgs = document.getElementsByTagName("img");
        var num = imgs.length;
        var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
        lazyload(); //页面载入完毕加载可是区域内的图片
        window.onscroll = lazyload;
        function lazyload() { //监听页面滚动事件
            var seeHeight = document.documentElement.clientHeight; //可见区域高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
            for (var i = n; i < num; i++) {
                if (imgs[i].offsetTop < seeHeight + scrollTop) {
                    if (imgs[i].getAttribute("src") == "") {
                        imgs[i].src = imgs[i].getAttribute("data-src");
                    }
                    n = i + 1;
                }
            }
        }
    }();

[demo]: http://wjf444128852.github.io/sumDemos/aboutImg/imgLazyload/index.html
[copycode.gif]: /images/20220604/c128055fe357436ab108641fd38bc14d.png