php预加载图片,wordpress图片预加载的实现

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

图片预加载的介绍

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

图片预加载的核心：lazyload。

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

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

首先下载lazyload.js文件：

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

然后我们做出一些定义：

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”//加载时的动画效果为淡入

});

});

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

如果你完全不懂编码，不想自己动手，那么就使用lazyload插件吧！  在后台插件搜索中，搜索插件jQuery lazyload，下载启用即可，如果没有效果可以在functions.php  中添加一下代码：

add_filter (‘the_content’, ‘lazyload’);

function lazyload($content) {

if(!is_feed()||!is_robots) {

$content=preg_replace(‘//i’,”\n

\$0”,$content);

}

return $content;

}

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