jquery wordoress 延迟加载 lazyload

给自己博客进行优化时，曾在一些较好的博客里见到过一些非常不错的用户体验设计，因此很想给自己博客也添加上类似的设计，前段时间花点时间把图片延迟加载(lazyload)效果给用上了，感觉不错，在时下流行的浏览器下测试都表现很完美，但是昨天自己在用手机浏览网站体验时发现延迟加载的图片在手机下面全部无法显示，整篇文章的浏览体验糟糕到极致，所以今天立即取消此特效。

特此注明也算分享给其他玩wordpress博客的童鞋，如果追求单方面电脑体验不在意手机浏览体验方面的话可以+上图片延迟加载(lazyload)特效，能给网站的用户体验加分，但是如果刚好和小波一样有那么点极致追求全方面的话那就取消此特效吧。

说说自己关于图片延迟加载测试整个环境：

电脑系统：XP SP3

博客版本：WP3.14中文版

电脑上的浏览器：时下所有流行浏览器

手机：E63

手机系统：塞班 v5

手机浏览器：OPERA

测试中由于暂时手中没有安卓(android)系统的手机，我不能确定此系统下是否能完美浏览，虽然安卓系统未来可能会代替塞班系统，但至少现在的手机使用情况下绝大部分童鞋还是以诺基亚等手机为主，兼顾考虑，还是取消是为上策。

jquery lazyload 图片延迟加载

随便提及下wordpress非插件使用jquery图片延迟加载(lazyload)的方法:

1.首先找到主题文件夹下的header.php页面

2.打开然后在头部标签</head>前添加如下代码：

<script type=”text/javascript” src=”http://www.ganxb2.com/js/jquery-1.6.1.min.js”></script>

<script type=”text/javascript” src=”http://www.ganxb2.com/js/jquery.lazyload.js”></script>

<script type=”text/javascript” src=”http://www.ganxb2.com/js/ganxb2.js”></script>

关于调用链接说明：

http://www.ganxb2.com/js/jquery-1.6.1.min.js

这是你放置下载的js文件路径，根据您自己博客的情况而修改

$(function() {
$(“.child-post img”).lazyload({
effect : “fadeIn”
});
});

上面代码语意：指只有在文章内页的图片才会使用图片延迟加载效果，可以根据自己的情况而改变修改 “.child-post img”

图片延迟加载(lazyoad)所需要的文件完整打包下载地址：

http://vdisk.weibo.com/s/QUbW

更多详细jquery图片延迟加载(lazyload)的使用方法请参看鸟哥这篇文章：

http://zmingcx.com/jquery-lazy-to-achieve-picture.html