原生js如何实现懒加载？

时间 2019-11-24

原文原文链接

前言：关于懒加载这个问题呢，是我大三暑假接到的一个电话面试问到的问题，当时我回答了大体的思路，可是极其含糊，离真正的实现仍是有差距的，现在过了快一年了，如今我就来实现一下吧~html

原理: 原理很简单，咱们不用想的很复杂。就是让img的src为空，图片的真实地址能够存储在img一个自定义的属性里，就好比date-src吧，等到目标图片出如今视野了，把data-src里的值赋给src。面试

实现懒加载必备知识：bash

上面提到自定义属性，那么如何获取自定义属性呢？用getAttribute（属性名）ui

除此以外，咱们还须要知道clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的区别以及所表明的含义，说实话，我本身也很模糊，每次使用的时候都须要查一下，相信不少人也跟我同样，那具体的我这里就不细说了，我查看了一些博客，以为有一篇写的挺好，这里我直接上图（别问我为何，由于我懒~）spa

这里我把这篇文章的地址给你们： www.cnblogs.com/libin-1/p/5…code

那么下面我将把本身的代码直接展现出来：cdn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img src="" date-src="../images/1.jpg" date-h="300" alt="">
    <img src="" date-src="../images/2.jpg" date-h="300" alt="">
    <img src="" date-src="../images/3.jpg" date-h="300" alt="">
    <img src="" date-src="../images/4.jpg" date-h="300" alt="">
    <img src="" date-src="../images/5.jpg" date-h="300" alt="">
    <img src="" date-src="../images/bird.png" alt="">
    <script>
        var imgs=document.getElementsByTagName("img");
        var n=0;//用来记录当前是第几张图片
        var seeHeight = document.documentElement.clientHeight;
        var h = imgs[0].getAttribute('date-h');
        // console.log(h);
        var index = Math.floor(seeHeight/h);//一进页面展现的几张图片
        for(i=0;i<=index;i++){
            imgs[i].src = imgs[i].getAttribute('date-src');
        }
        window.onscroll = function(){
            for (var i = n; i < imgs.length; i++) {
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                if (imgs[i].offsetTop < seeHeight + scrollTop) {
                    if (imgs[i].getAttribute('src') == '') {
                        imgs[i].src = imgs[i].getAttribute('date-src');
                    }
                    n = i + 1;
                    console.log('n = ' + n);
                }
            }
        }
    </script>
</body>
</html>


复制代码

总之：但愿大佬们多多指教，给点意见~htm