友人C

lazyload.js 减轻图片加载负担
lazyload.js 减轻图片加载负担 图片延迟加载大家可能有听说过,其实qqdie的博客早就使用了这个jque...
扫描右侧二维码阅读全文
23
2017/01

lazyload.js 减轻图片加载负担

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 插件] ,作者提供了新的方法:通过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 日 12 : 43 AM
如果觉得我的文章对你有用,请随意赞赏

11 条评论

  1. Jimmy

    应该可以直接在模板的文章输出处加preg_replace,感觉会更简单些。(很久没碰Typecho了,可能会记错)

    1. 友人C
      @Jimmy

      这种方法应该也是可以的,在输出文章内容之前,先把调出数据库该文章的内容,用preg_replace函数把内容中图片用正则给修改成所需要的结构(。•ˇ‸ˇ•。)

  2. Tokin

    不是图片站的话,用不用效果也不明显。。。→_→

    1. 友人C
      @Tokin

      确实哦,不过对于文章中插入图片比较大,体积比较大,还是不错的,我喜欢那个图片fadein的效果(滑稽)→_→

  3. 烟花易冷

    一直在用,不错

  4. yufan

    你可以试试腾讯云cos,支持https(免费)还可以弄防盗链,我现在基本都在用那个放图,七牛都放一边了

  5. 蔡锶铎

    鸡年鸡翔啊!XD

    1. 友人C
      @蔡锶铎

      话说你的博客手机端打开后不能滑动滚动条(´இ皿இ`)是安卓chrome 浏览器,其他浏览器没有测试过

      1. 蔡锶铎
        @友人C

        可能是播放器进度条的问题…… 我看看能不能修……

  6. xema

    我觉得这个插件很不错,对于流量党是福音啊

    1. 友人C
      @xema

      效果也挺好看哦~

发表评论