如果网页中如果图片很多，那么打开这个网页一般都需要很长时间，不利于网站体验。图片延迟加载可以提高网页打开的速度。只有浏览到图片位置时才加载图片，另一方面也可以减轻
如果网页中如果图片很多，那么打开这个网页一般都需要很长时间，不利于网站体验。图片延迟加载可以提高网页打开的速度。只有浏览到图片位置时才加载图片，另一方面也可以减轻服务器负担。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