wordpress图片预加载的实现

最近有朋友在群里面提问，我们的主题图片预加载功能是如何实现的，既然大家觉得预加载的功能非常好，那么小编就专门写一篇文章来介绍wordpress的预加载是如何实现的吧！

图片预加载的介绍

预加载，顾名思义，在超出网站可视范围内，图片不做加载，等到用户滚动浏览器窗口，图片元素到达可视范围内，开始加载图片，这样的方式可以打打的节省网站的资源和加快网站加载的速度，所以对于图片较多的wordpress网站来说，图片预加载功能还是非常的好的。

图片预加载的核心：lazyload。

对于lazyload有网站编程经验的朋友应该都很熟悉，图片预加载的功能实现就是这个js文件来实现的。

使用lazyload有两种方式，一种是使用插件，一种是直接集成在主题中的非插件方式，下面我们首先介绍一下非插件实现lazyload：

首先下载lazyload.js文件：jquery.lazyload.js

在wordpress主题中的header.php中加载这个文件：

<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/jquery.lazyload.js”></script>
然后我们做出一些定义：
<script type=”text/javascript”>
DD_belatedPNG.fix(‘div, ul, img, li, input , a’);//这里表示lazyload中的背景图片在这些元素中
$(function() {
$(“img.wp-post-image”).lazyload({
placeholder : “<? bloginfo(‘template_url’); ?>/images/grey.gif”, //这里填写你的lazyload之前显示的loading图片
effect : “fadeIn”//加载时的动画效果为淡入
});
});
</script>

这样，你wordpress网站就达成了lazyload的功能，是不是很简单呢？

如果你完全不懂编码，不想自己动手，那么就使用lazyload插件吧！  在后台插件搜索中，搜索插件jQuery lazyload，下载启用即可，如果没有效果可以在functions.php  中添加一下代码：
add_filter (‘the_content’, ‘lazyload’);
function lazyload($content) {
if(!is_feed()||!is_robots) {
$content=preg_replace(‘/<img(.+)src=[\'”]([^\'”]+)[\'”](.*)>/i’,”<img\$1data-original=\”\$2\” src=\”loading1.gif\”\$3>\n<noscript>\$0</noscript>”,$content);
}
return $content;
}

这样即可完成lazyload的功能了！希望这篇文章对你有所帮助吧！