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张可见区域外的图片,以避免出现这个问题。