“瀑布流式”图片懒加载代码解析及优化(二)

本文链接：https://blog.csdn.net/yisuowushinian/article/details/50707922

本文是关于瀑布流式图片懒加载的优化文章，旨在减少一次性加载的带宽消耗。作者分析了之前的代码，提出改进方案，包括用户配置与默认配置的合并，新增了控制首屏加载数量和预加载范围的参数，优化了代码结构，以提高加载速度和用户体验。附带示例Demo供下载与问题反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇《“瀑布流式”图片懒加载代码示例》再来看看图片“懒加载”的一些知识。

图片“懒加载”的主旨：
按照需要加载图片，也就是说需要显示的时候再加载图片显示，减少一次性加载的网络带宽开销。

先来看一段代码：

    var conf = {
            'loadfirst': true,
            'loadimg': true
        };

        for (var item in conf) {
            if (item in co) {
                conf.item = co.item;
            }
        }

这里我主要是想实现，用户配置和默认配置的合并，这样写代码并不是很优雅，现在使用$.extend来做优化，代码如下：

_this.setting = {
            "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置
            "loadNum": 1 //滚动时，当前节点之后加载个数
        };

        $.extend(_this.setting, _this.getSetting());

这里重点介绍下，我新添加的两个参数mobileHeight,loadNum

mobileHeight 默认客户端的高度，值越大，首屏加载的图片越多;
loadNum 如果当前节点出现在屏幕上以后，可以一次性加载当前节点之后的若干个节点，可以跳高图片的加载速度;

之前我的代码是这样子写的：

_this.loadFirstScreen = function() {
   
            if (conf.loadfirst) {
                lazyNode.each(function(i) {
   
                    currentNodeTop = $(this).offset().top;
                    //这里的800就是上面提到的mobileHeight
                    if (currentNod