JS实现懒加载的方案以及和瀑布流的区分_瀑布流和懒加载区别-CSDN博客

本文链接：https://blog.csdn.net/shadowfall/article/details/115061347

瀑布流和图片懒加载的区别

瀑布流

为了分页效果
因为数据量过大, 导致一页显示不下
所以每页显示 20 条, 当浏览器滑动到底部的时候, 加载第二页

图片懒加载

已经存在的 20 张图片, 只把第一屏会显示的加载出来
20 张不在屏幕内的, 等到需要进入屏幕的时候才加载

懒加载的实现方案


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload 2</title>
    <style>
    img {
        display: block;
        margin-bottom: 50px;
        height: 200px;
    }
    </style>
</head>
<body>
    <img src="images/loading.gif" data-src="images/1.png">
    <img src="images/loading.gif" data-src="images/2.png">
    <img src="images/loading.gif" data-src="images/3.png">
    <img src="images/loading.gif" data-src="images/4.png">
    <img src="images/loading.gif" data-src="images/5.png">
    <img src="images/loading.gif" data-src="images/6.png">
    <img src="images/loading.gif" data-src="images/7.png">
    <img src="images/loading.gif" data-src="images/8.png">
    <img src="images/loading.gif" data-src="images/9.png">
    <img src="images/loading.gif" data-src="images/10.png">
    <img src="images/loading.gif" data-src="images/11.png">
    <img src="images/loading.gif" data-src="images/12.png">
    <script>
    function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
        var timeout = null,//进行去抖处理
        startTime = new Date();
        return function() {
           　　var curTime = new Date();
        　　　　clearTimeout(timeout);
       　　　　 if(curTime - startTime >= atleast) {
        　　    fn();
           　　 startTime = curTime;
        　　　　}else {
           　　　　 timeout = setTimeout(fn, delay);
        　　　　}
        }
    }
    function lazyload() {
        var images = document.getElementsByTagName('img');
        var len    = images.length;
        var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历        
        return function() {
        　　　　var seeHeight = document.documentElement.clientHeight;
       　　　　 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     　　　　   for(var i = n; i < len; i++) {
           　　　　 if(images[i].offsetTop < seeHeight + scrollTop) {
               　　　　 if(images[i].getAttribute('src') === 'images/loading.gif') {
               　　　　　　  images[i].src = images[i].getAttribute('data-src');
               　　　　 }
           　　　　　　 n = n + 1;
            　　　　}
        　　　　}
        }
    }
    var loadImages = lazyload();
    loadImages();          //初始化首页的页面图片
    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
　　//函数节流（throttle）与函数去抖（debounce）处理,
//500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数
    </script>
</body>
</html>