lazyload.js 减轻图片加载负担

图片延迟加载大家可能有听说过，其实qqdie的博客早就使用了这个jquery插件，这款插件只有4K！但是有一个缺点是文章中的图片并没有使用延迟加载，问题在于这款jquery 插件 对于图片<img> 的结构的要求必须是这样的：

<img data-orignal="xxxx.png" src="img/grey.gif" >

解释一下这个结构：src里面存放占位图，data-orignal 存放的才是真实的图片地址。当滚动到图片位置的时候，这个插件才会把真实的地址赋给src ，这样图片就会加载出来。是一种延迟加载的策略。

这个结构对于已经固定死结构的图片（比如评论区的头像或者其他的一些结构固定的图片）比较容易，自己改一下就很简单，但是对于文章中的图片 如何自动生成这种结构，却让人头痛，总不能让用户手动在后台编辑器添加图片吧，这是不人性化的~

一开始是想通过js获取到所有图片，然后把图片的data-orignal 属性赋值为src的值，再把 src 属性全部赋值为img/grey.gif。代码其实很简单，是这样的：

//对文中图片惰性加载
var imgs = $(".wrapper-lg img");
for (var i = 0; i < imgs.length; i ++) {
    var srcvalue = $(imgs[i]).attr("src");
    $(imgs[i]).attr("data-original",srcvalue);
    $(imgs[i]).attr("src","<?php $this->options->themeUrl("img/grey.gif") ?>");
}

效果非常尴尬，本来图片先出来，然后界面闪一下，图片变成占位图。？？？
这样就本末倒置，起不到任何作用！如果不能对文章图片延迟加载，这个插件其实没有多大作用的！

就在我要放弃的时候，发现了这篇文章[LazyLoad+ob_start()，完美解决图片延迟加载 [jQuery 插件]](http://www.rainleaves.com/html/1248.html) ,作者提供了新的方法：通过php的ob_start()函数在页面加载区的时候就更换图片属性 。关于ob_start();函数原理原博文有介绍，不再赘述，这里介绍使用方法：

在footer.php 中

<?php
//图片延缓加载相关处理，替换src为data-original，并添加占位符
$echo = ob_get_contents(); //获取缓冲区内容
ob_clean(); //清楚缓冲区内容，不输出到页面
$placeholder = "img/grey.gif"; //占位符图片
$preg = "/<img (.*)src(.*) \/>/i"; //匹配图片正则
$replaced = '<img \\1src="'.$placeholder.'" data-original\\2 />';
print preg_replace($preg, $replaced, $echo); //重新写入的缓冲区
ob_end_flush(); //将缓冲区输入到页面，并关闭缓存区
?>

代码也非常容易理解，就是设置页面中所有的图片(事实上并不是所有的)的src 和data-original 的值。

最后使用

$("img").lazyload();

就可以实现延迟加载的效果了。

那么问题来了！

我不想所有的图片都延迟加载，怎么办？其实上面的正则匹配中隐藏了一个黑名单机制！

图片的html结构为

<img src="" (其他html代码)/>

即图片标签的结束标签/前面如果没有空格 ，则不会被正则表达式匹配成功，也就不会延迟加载。

好了，这样一来，解决了所有我遇到的问题了！

最后需要了解的是延迟加载的常见设置项：

  • 加载特效：图片会以淡入的方式显示（更多特效参阅官方文档）
$("img").lazyload({
effect : "fadeIn"
});
  • 触发加载方式：可以选择点击图片才显示内容
$("img").lazyload({
event : "click"
});

当然，还有一些更有趣的设置项可以参阅官方文档。

插件地址：tuupola/jquery_lazyload

对了，如果你对图片的黑名单机制有什么更好的想法，欢迎一起讨论。

最后修改：2017 年 02 月 05 日
© 允许规范转载
喜欢我的文章吗？
别忘了点赞或赞赏，让我知道创作的路上有你陪伴。