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 插件

子痕

男人分四种,一种聪明,一种英俊,一种不聪明也不英俊,我是第四种。

You may also like...

13 Responses

  1. Louis Han说道:

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

  2. Junan说道:

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

  3. Likecer说道:

    Lazyload这名字起得形象

  4. Sam说道:

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

  5. bloodface说道:

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

    • 子痕说道:

      @bloodface : 这篇文章是以前写的,确实是伪lazyload,真正的lazyload我已经重新写了篇文章,并将链接放到这篇文章的末尾处了。

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

  1. 2013/10/14

    […] 博客之前用的这个方法来延迟加载图片的,感觉上图片是延迟加载了。但这并不是真正的延迟,打开含有图片的页面时,还会加载所有的图片;另外jquery.lazyload.js最新代码已经改过了,再用以前的方法也失效了。 […]

  2. 2013/10/14

    […] 博客之前用的这个方法来延迟加载图片的,感觉上图片是延迟加载了。但这并不是真正的延迟,打开含有图片的页面时,还会加载所有的图片;另外jquery.lazyload.js最新代码已经改过了,再用以前的方法也失效了。 […]

发表评论

电子邮件地址不会被公开。 必填项已用*标注