Python shell 微软 linux Windows 开源 linux命令 mysql wordpress HTML5 Ubuntu php Firefox Android java apache centos 程序员 google nginx

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图片)

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

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

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

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

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

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

测试2

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

其中有11幅图质量较大

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

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

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

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

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

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

Q & A

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

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

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

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

Q.如何进行相关设置?

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

如果依然有问题无法使用,请联系作者(yslove.net),这位朋友很热心,会来帮你解决。

作者Email:gigjiajia [at] gmail.com,作者QQ: 270162642 (验证时请注明:lazyload插件有问题)

本文转自:http://yslove.net/2011/04/wordpress-plugin-ys-lazyload/

延伸阅读

  • 抱歉,暂无相关内容!

评论