wordpress 插件 images lazyload

写了一个非常简单的插件,其灵感来源于jQuery lazyload,但是只在客户端是无法实现真正的Lazyload的,因为浏览器的差异,有时甚至会造成2倍的请求,那如何只让可见的图片进行加载?

答案是在服务端对img标签的src属性进行更改即可。

下载

插件下载地址

非常简单的安装:

  1. 直接把文件夹解压到wordpress plugins文件夹下;
  2. 在插件控制面板上启用即可。

注意:插件依赖于jQuery类库,所以确保你的博客引用了jQuery类库!

 

测试地址:本站已经启用插件,随便点开页面即可测试。

测试页面与说明

先看一下对网页优化的重要准则:

Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests

我们的经验表明减少 HTTP 请求数能最有效地减少页面响应时间,这通常也是性能优化的最简单方法。(YUI)

测试1

 

这个页面图片的数量为64个(背景+img图片)

前:先看一下正常情况下的加载

no-use

60个请求,文档体积995.1K,加载时间为7.06s

后:再看一下启用插件后的情况

image

20个请求,文档体积371.6K,加载时间为2.34s

小结:可以看到,在大量图片请求下,可以有效的减少加载时间并且减少请求数量与文档体积!

注意:根据网络(网速)不同测试会有偏差,由其现在我的主机在国外,国内访问经常不是很稳定。 测试2

这个页面图片的数量为21个(背景+img图片)

其中有11幅图质量较大

前:先看一下正常情况下的加载

no-used-b

21个请求,文档体积1.3M,加载时间为5.61s

后:再看一下启用插件后的情况

used-b

11个请求,文档体积256.7K,加载时间为3.47s

小结:可以看到,在大量高质量图片请求下,可以减少请求数量与文档体积并且加载时间也会有所提升!

注意:根据网络(网速)不同测试会有偏差,由其现在我的主机在国外,国内访问经常不是很稳定。

Q & A

Q. 为什么我的主题安装后无效?

A. 首先一定要确定主题已经引用jQuery类库,并且在使用的主题中一定要包含wp_headerwp_footer函数。

Q.为什么启用了插件后感觉更慢了?

A.因为图片的延迟加载,所以图片会在文档加载完后再渲染,这样如果特别大量图片产生并发,页面上可能会出现短暂的卡现象。不过这里也是要根据当前的网速与连接的主机情况而定。

Q.如何进行相关设置?

A.抱歉这个版本只是提供基本的功能,在以后的版本中会考虑更多功能并可以在后台设置,比如加载页面的高度与图片特效等。

更新

添加淡入 (fadein) 效果;

添加一个占位符文件,防止没有src的image标签在某些情况下导致浏览器崩溃;

修改一些bug。

如果依然有问题无法使用,请联系我,我来帮你解决。

Email: gigjiajia [at] gmail.com

QQ: 270162642 (验证时请注明:lazyload插件有问题)

此条目发表在 wordpress 分类目录,贴了 , , 标签。将固定链接加入收藏夹。