魔改Lazyload前台调用代码实现异步加载图片

图片传输效率又是一大性能瓶颈，有钱人们选择用对象储存解决，我就没法解决。

当然是不可能的。

我使用的handsome主题自带lazyload功能，但是默认关闭，且作者并不推荐使用，称或将带来卡顿（？）。
当然，即使你的网站没有lazyload，你也可以自行引入，这里不再赘述。

什么是Lazyload

一个可以实现图片懒加载的插件。所谓图片懒加载，即“你不看我就不加载”，最经典的操作便是监听一个scroll事件，当『快要看到这张图片』时，开始一个异步请求进行图片的加载。不难发现，其中最重要，也最微妙的就是对于『快要看到这张图片』时机的把握。

大部分经典的实例，是通过一个距离来控制，也就是lazyload中的threshold参数。它用于设置一个临界值，当屏幕下端距离屏幕外的图片距离小于等于这个值的时候，lazyload开始load。大概类似于早自习犯困的你拜托同桌当老师来的时候提醒你一下（addEventListener），当负责任又好心的同桌提醒你时（trigger），你就赶紧爬起来认真早读。

为何使用Lazyload

我注意到，当网络状况差，图片无法立即加载时，大部分关键的js都处于蓄势待发状态，需等待图片加载完成（此时才会触发document的ready）才会开始执行，极大地影响了用户[heimu]我自己[/heimu]体验。事实上，图片加不加载好对我js的执行并没有影响，完全可以让图片加载自个在后面慢慢拖，而让document的ready提前，从而尽可能缩短js不执行的糟糕真空期。

这时，就轮到lazyload大显身手啦~

使用handsome主题的typecho用户可以通过打开“后台->控制台->外观->设置外观->主题增强功能->增强功能开关”中的“延迟加载图片（lazyload）”选项来打开lazyload。

通用的方法是在body结束前、jQuery加载后手动引入lazyload.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.lazyload.min.js"></script>

同时对需要进行lazyload的元素属性作一定的调整，设置data-original为实际加载地址，并设置一个占位图片，在这里不再赘述。

问题与改进

在使用过程中，我发现了新的问题，即我的图片加载实在是太 慢 了，以至于根本无法在滚动到图片位置时完成加载。就好像虽然你的同桌提醒了你，但你实在是太困，一直磨蹭到老师站在你面前了也没把书拿出来。

事实上，我们也不是真的希望这个图片“懒”，只是希望它不要给大家拖后腿，别卡住document的ready事件。

那么我们就完全可以跳出常规思路，不再使用默认的scroll作为触发事件。lazyload提供了一个参数event允许我们自定义触发事件。只需要给这个参数随便传一个不冲突的事件名字，在设置完成lazyload之后立即trigger我们的自定义事件，即可瞬间开始图片的异步请求，而不必等待滚动，如此一来就能进一步优化体验。

栗子：

$("img").lazyload({
    effect: "fadeIn",
    event: "display" // 替换默认的触发事件
});
$("img").trigger("display"); // 立即触发

仅仅是这样似乎还不够，lazyload似乎仍然是滚动优先触发。虽然做到这个程度已经差不多了，但我不想让它的触发机制复杂起来，不妨设想有时需要点击后再开始加载，这时滚动触发就没法让它按照预期去呈现。所以我们再给它补一个threshold参数混淆视听，设置一个绝对值很大的负数，滚动触发基本上就没什么戏了。这里我选择了-0x7fffffff，下面是我最终使用的代码：

$("img").lazyload({
    threshold: -0x7fffffff, // 让不需要的部分见鬼去
    effect: "fadeIn",
    event: "display" // 替换默认的触发事件
});
$("img").trigger("display"); // 立即触发

版权声明：本文是原创文章，版权归 无限UCW 所有。

本文链接：https://ucw.moe/archives/call-image-lazyload.html

本站所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由地转载和修改，但请务必注明文章来源并且不可用于商业目的。