图片懒加载原理

首先为什么要有图片懒加载：
使用图片懒加载的话就不会刚一打开页面就会把body中的所有图片都加载出来，这样可以减少对http的请求，也可以优化代码，也可以让服务器去按需加载。
图片懒加载的思路：
就是说我们刚一打看页面的时候让他加载在可视区域内的内容，所以说我们可以使用一张加载中的图片先放在上面占位，之后通过滑动让我们本来要看到的有个图片在替换掉加载中的图片。
画一张图：

下来时代码（html）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/00.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            height: 100%;
            width: 5rem;
            display: block;
            margin: 0 auto;
            border: 1px solid #000;
            
        }
    </style>
</head>
<body>
    <img src="../img/loading.gif" alt="" data-src="../img/1.jpg">
    <img src="../img/loading.gif" alt="" data-src="../img/2.jpg">
    <img src="../img/loading.gif" alt="" data-src="../img/3.jpg">
    <img src="../img/loading.gif" alt="" data-src="../img/4.jpg">
    <img src="../img/loading.gif" alt="" data-src="../img/5.png">
    <img src="../img/loading.gif" alt="" data-src="../img/6.jpg">
    <img src="../img/loading.gif" alt="" data-src="../img/7.png">
</body>
<script src="../js/int.js"></script>

</html>

js代码：


function lanjiazai() {
    var image = document.getElementsByTagName('img')
    var offsetTop = 0
    var img2 = []
    for (let i = 0; i < image.length; i++) {
        var ele = image[i]
        if (ele.getAttribute("data-src")) {
            if (load2(ele)) {
                ele.src = ele.getAttribute('data-src');
            } else {
                img2.push(ele)
            }
        }
    }
    var img3 = img2.length
    function handler() {
        for (let j = 0; j < img3; j++) {
            var el = img2[j]
            if (load2(el)) {
                (function (el) {
                    setTimeout(function () {
                        console.log(el)
                        el.src = el.getAttribute('data-src');
                    }, 2000)
                })(el)
                img2.splice(j, 1);
                img3--;
                if (img3 === 0) {
                   window.removeEventListener("scroll", handler, false)
                }
            }
        }
    }

    function load2(ele) {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var cliteHeight = document.documentElement.clientHeight+30
        var height = cliteHeight + scrollTop
        var offsetTop = ele.offsetTop
        return (offsetTop < height)
    }
  window.addEventListener("scroll", handler, false)
}
lanjiazai()

猜你喜欢