折腾无极限
不曾长大

WordPress Lazyload 图片延迟加载

由于本博客放的照片比较多,当打开一个页面所有的图片全部加载,不仅增加了服务器的负担,而且拖慢了网页的显示速度,对于用户体验不是很好。特别是用户点击之后又一下关闭之后,完全浪费了服务器的感情。所以考虑放延迟加载图片的插件。

这里介绍的是利用jquery.lazyload.js,其实是 jQuery 的插件实现图片延迟加载的效果,Wordpress图片会随着浏览器滚动条渐显的效果。

[warning]2013-10-14更新:
如果使用jquery.lazyload.js新的版本,则此方法已经失效。即使原来的版本的js,也不是真正的lazyload。最新的真正的lazyload请移步这里 https://www.mzihen.com/real-lazyload/

2013-11-06更新:
好多人都没耐心看到末尾的更新,我索性把更新链接提到上面来了,但这样影响了排版,只希望能帮助更多的人。
[/warning]

图片延迟加载的优缺点

延迟加载图片,提升页面加载速度
逐渐显示的效果,比较华丽优美

对于图片信息丰富的网站,特别是靠图文信息吃饭的网站,比如电子商务依赖搜索引擎比较多,延迟加载会影响到SEO。

代码下载

最新源代码 jquery.lazyload.js (8.12 kb)
网上也有以前的版本,只有1.58kb

代码安装

jquery.lazyload.js 是 jQuery 的插件,所以必须先载入jQuery,现在一般皮肤都会用到jQuery。没有的同学可以在 之间插入如下代码:

然后在插入这段代码:



保存修改。

其中jquery.lazyload.js和loading.gif是放在对用的皮肤目录下的,路径一般是 /wp-content/themes/某某皮肤/

其它设置应用

1、用图片提前占位 placeholder : “img/grey.gif”, 参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏。
2、载入使用何种效果 effect : “fadeIn”, 参数:effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn。
3、提前开始加载 threshold : 200, 参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉。
4、事件触发时才加载 event : “click”, 参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
5、对某容器中的图片实现效果 container: $(“#container”), 参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片。
6、图片排序混乱时 failurelimit : 10, 参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题。

其它拓展阅读

mg12 Lazy Load, 延迟加载图片的 jQuery 插件

赞(0) 打赏
未经允许不得转载:子痕的博客 » WordPress Lazyload 图片延迟加载

评论 13

  1. #-19

    好吧,我一个页面40+张图,多不多?

    Louis Han12年前 (2012-11-20)回复
  2. #-18

    有些主题都自带这个功能了。延迟也好,多图打开会快很多。哈哈

    Junan12年前 (2012-11-22)回复
    • @Junan  嗯那,速度上去了哈,体验好了些~不过图片暂时还比不了楼上的!

      子痕12年前 (2012-11-23)回复
  3. #-17

    Lazyload这名字起得形象

    Likecer12年前 (2012-11-25)回复
  4. #-16

    刚刚搞定了一些lazyload~~目测你现在的lazyload跟我之前一样~~都是伪Lazyload~是已经加载暂缓显示~~Firebug可以很清楚显示。。你得改一下图片前缀。。。。

    Sam11年前 (2013-09-26)回复
    • @Sam : 文章的lazy load应该是真的吧?
      我主题用的自带的lazy load,如果真如你所说,回头我改改~

      子痕11年前 (2013-09-26)回复
  5. #-15

    你这个不能用是吧。是伪lazy?

    bloodface11年前 (2013-11-03)回复
    • @bloodface : 这篇文章是以前写的,确实是伪lazyload,真正的lazyload我已经重新写了篇文章,并将链接放到这篇文章的末尾处了。

      子痕11年前 (2013-11-03)回复
  6. #-14

    这个方法不错,我有的文章多达几十张图片

    魅力花果山摄影10年前 (2014-03-08)回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏