使用lazyload实现wordpress内容页图片延迟加载效果

如果网页中如果图片很多，那么打开这个网页一般都需要很长时间，不利于网站体验。图片延迟加载可以提高网页打开的速度。只有浏览到图片位置时才加载图片，另一方面也可以减轻服务器负担。lazyload这个javascript插件可以很少的实现。如何在wordpress中添加这个功能？

首先了解下lazyload插件，他的官方网址：http://www.appelsiini.net/projects/lazyload 。lazyload依赖jquery，所以必须在加载插件之前加载jquery 。

下载解压后上传到wordpress主题下的js目录。

lazyload：下载一

然后修改wordpress主题下的header.php文件，添加如下代码。

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function() {
 $("img").lazyload({
 effect:"fadeIn"
 });
 });
</script>

jquery.min.js大多数主题可能已经加载。

最后为图片添加data-original属性。修改wordpress主题下的functions.php，添加如下代码。

add_filter ('the_content', 'lazyload');
function lazyload($content) {
 $loadimg_url=get_bloginfo('template_directory').'/images/loading.gif';
 if(!is_feed()||!is_robots) {
 $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
 }
 return $content;
}

images/loading.gif在图片还没加载之前显示，可以找下适合自己的loading图。

这样不用插件就实现了wordpress内容页图片延迟加载的效果。

具体效果请点击“演示页面”，查看图片延迟加载的演示。

演示页面

参考：

http://www.appelsiini.net/projects/lazyload