您的位置: 首页  >  文章  >  lazyLoad——减少页面请求时间，节省流量。

lazyLoad——减少页面请求时间，节省流量。

分类: 文章 • 2025-04-14 14:49:34

为什么要使用懒加载而不直接加载？
当然没规定一定要懒加载，肯定是根据实际情况来决定使用的与否。
当你一个页面有庞大的数据需要请求加载（比如花瓣、Pixiv等网站），你如果一次请求，先不说你要多久才能请求完整个页面，你有那么多流量吗？什么，你还不是无限流量，那你可以把自己卖给移动、电信、联通了。
lazyLoad——减少页面请求时间，节省流量。
使用懒加载加载图片有什么好处呢？
1 增强用户体验
2 优化代码
3减少http的请求
4减少服务器端压力
5服务器的按需加载

看到一个api很厉害，我们判断懒加载的执行一般是滚动条是否到底，或者浏览器的可视区，

IntersectionObserver

监视某个页面元素是否进入了可见窗口

这个api很厉害：（可见该博主的博客）
https://www.cnblogs.com/xupeiyu/p/5985652.html

当然，今天我只是简单的用jquery封装一个懒加载插件，不足之处请多多指教

function lazyLoad() {
    //当前窗口的高度
    var windowHeight = $(window).height();
    // 文档(document)的高
    var bodyHeight = $(document).height();
    //没有滚动条的情况下（图片不满屏），直接加载
    if(bodyHeight <= windowHeight){
        $('.lazyImg').each(function () {
            var that = $(this);
            //
            if(that.attr('data-src')!=that.attr("src")){
                //所需地址存在，则src变更为所需地址
                if(that.attr('data-src')){
                    that.attr('src',that.attr('data-src'))
                }
                //不存在以下操作可自定义
                else{
                    that.attr('data-src',that.attr('src'))
                }
            }
        });
    }else{
        var phase = 100;
        $(document).on("scroll",function (e) {
            $(".lazyImg").each(function () {
                var that = $(this);
                //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
                var realTop = parseInt($(window).height())+parseInt($(window).scrollTop());
                //屏幕顶部距离最顶部的高度   减去图片高度，上拉时也会点到图片就加载
                var thatTop = parseInt($(window).scrollTop()) - parseInt(that.height());
                var imgTop = parseInt(that.offset().top);
                if(imgTop>=thatTop - phase && imgTop<=realTop +phase && that.attr('data-src')!=that.attr('src')){
                    //所需地址存在，则src变更为所需地址
                    if(that.attr('data-src')){
                        that.attr('src',that.attr('data-src'))
                    }
                    //不存在以下操作可自定义
                    else{
                        that.attr('data-src',that.attr('src'))
                    }
                }
            })
        })
    }
}
lazyLoad();
$("body,html").scrollTop(1);
//进页面，吧顶部的图刷出

放一个demo下载:

https://github.com/LyuSen/lazyload

也可以直接拷贝：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jquery可视区域图片懒加载</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

    </style>
  
</head>

<body>

<div class="content">
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/8bb75dd3158a3fefeffafc9106eea9438d1d8fc36f522-O6PhIJ_fw658" />
    </div>
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/128b5f2408da4cde826f0164ad81d8cb599107e5192604-zxyHyz_fw658" />
    </div>
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/e042aae32a5be59654474849f5049fb91c42b4177def7-jbEAzI_fw658" />
    </div>
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/697836d0d70cb5fe6b05e101e02e30c6647af2bb14a7d7-Y0urBZ_fw658" />
    </div>
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/49b53669dbae73b580cb7ba98e6b3ab26fbd1e6778f94-xttSXV_fw658" />
    </div>
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/ca7b0aa2ebb21d3a24e96aa9ef9b6ee561b09c7b330d1-Au63JD_fw658" />
    </div>
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/667e4064973fa23ffd00492942e511ebdc7546514ef07-gnQQeh_fw658" />
    </div>
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/1664b278f44422ebaf00f29f062a08099a549a1a21cdf-3J4vFZ_fw658" />
    </div>
    <div class="m1">
        <img class="lazyImg" src="https://img.alicdn.com/imgextra/i1/94720297/TB2tVFMmYXlpuFjy1zbXXb_qpXa_!!94720297.jpg" data-src="http://img.hb.aicdn.com/ec792601a317502674224bc3b4139e645e2182042ddf5-wORVIJ_fw658" />
    </div>
</div>

<script src="../匪云阁/fyg/static/commons/js/jquery3.1.1.js"></script>
<script src="js/lazyLoad.js"></script>
</body>

</html>

效果查看
lazyLoad——减少页面请求时间，节省流量。

相关推荐