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(); //将缓冲区输入到页面,并关闭缓存区
?>

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

最后使用

$("img").lazyload();

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

那么问题来了

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

图片的html结构为

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

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

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

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

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

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

插件地址:tuupola/jquery_lazyload

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

最后修改:2017 年 02 月 05 日
喜欢我的文章吗?
别忘了点赞或赞赏,让我知道创作的路上有你陪伴。