懒加载技术详解-CSDN博客

本文链接：https://blog.csdn.net/Dear_Mr/article/details/62579029

1、什么是懒加载？

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径（src属性）替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片或者其他元素出现在浏览器的可视区域内时，才设置图片正真的路径，让图片加载出来

2 、懒加载的特点？

一方面可以减轻服务器的压力，另一方面让页面更快地呈现在用户面前

3、懒加载的实现？

我们在写标签的时候，img的src中可以是一个占位图，真的路径存在元素的“data-url”（这个属性可以自己定）属性里，当页面的”可视区高度 + 被折叠页面的高度“大于“img的offsetTop”,则就需要将img的src属性值设置为data-url的值。
下面就是一个简单的实现：

var img = document.getElementsByTagName("img");
var len = document.getElementsByTagName("img").length;
var n = 0;

function load() {
    var seeHeight = document.documentElement.clientHeight;  //可视区的高度
    var scrollHeight = document.body.scrollTop; //被折叠页面的高度
    for(var i = n; i < len; i++) {
        if(img[i].offsetTop < seeHeight + scrollHeight && img[i].getAttribute('src') == 'img/loading.png') {
            img[i].src = img[i].getAttribute('data-url');
            n = i+3;
        }
    }
}
function throttle(fn, delay, time) {
    var start = new Date();
    var timeout = null;
    return function() {
        var current = new Date();
        clearTimeout(timeout);
        if(current - start >= delay) {
            fn();
            start = current;
        }else {
            timeout = setTimeout(function() {
                fn();
            }, time);
        }
    }

}

window.addEventListener("scroll", throttle(load, 500, 500), false);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .div-container {
                width: 350px;
                height: 360px;
                background: #F5F5F5;
                border: 1px solid #ddd;
                box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);
                position: relative;
                margin:30px 40px;
                display: inline-block;
            }
            .div-container p{
                width: 350px;
                padding: 20px 0 30px 0;
                margin:0;
                display: block;
                position: absolute;
                background: #FFF;
                bottom: 0;
                color: #999;
                text-align: center;
            }
            img{
                width: 350px;
            }
        </style>
    </head>
    <body>
        <div class="div-container">
            <img src="img/loading.png" data-url="img/6.jpg" />
            <p>这是一张图片</p>
        </div>
                <div class="div-container">
            <img src="img/loading.png" data-url="img/7.jpg" />
            <p>这是一张图片</p>
        </div>
        <div class="div-container">
            <img src="img/loading.png" data-url="img/8.jpg" />
            <p>这是一张图片</p>
        </div>
        <div class="div-container">
            <img src="img/loading.png" data-url="img/9.jpg" />
            <p>这是一张图片</p>
        </div>
                <div class="div-container">
            <img src="img/loading.png" data-url="img/10.jpg" />
            <p>这是一张图片</p>
        </div>
        <script src="js/img.js"></script>
    </body>
</html>