WordPress如何实现图片延迟加载

发布时间:2012-06-30 20:54:11

介绍过什么是图片延迟加载,又叫图片懒加载。对于网站页面上有大量图片,图片延迟加载非常有用,可以加速网页打开速度,减轻服务器负担。

WordPress如何实现图片延迟加载

对于图片延迟加载功能,很多使用WordPress程序建网站的学员不会使用。下面就来介绍一下WordPress如何实现图片延迟加载。

方法/步骤
图片延迟加载是基于JQUERY的,所以需要在自己网站上加载JQUERY。在底部模板footer.php中</body>标签上面加上以下的JS代码,引入JQUERY。
<scrip src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
下载图片延迟加载必需的jquery.lazyload.js 插件,下载地址:jquery.lazyload.min,下载好后,将它传到自己模板中的images文件夹里。
使用以下的JS代码调用jquery.lazyload.js 插件,放在</body>标签上面。
<script src=”<?php echo get_template_directory_uri(); ?>/images/jquery.lazyload.min.js”></script>
<script type=”text/javascript”>
$(function() {
$(“img”).lazyload({
effect:”fadeIn”
});
});
</script>
所在模板里的图片都需要添加一个data-original属性。代码示例:
<img data-original=”img/abc.jpg” width=”540″ height=”300″ alt=””>
除了模板文件中有图片之外,我们在发布文章时,也会插件图片。为了让文章图片也能延迟加载,需要在模板函数文件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;
}
通过以上几步的修改,整个wordpress网站里的图片都可以实现延迟加载了,在学员学习怎么做网站可以自己动手操作一下,实现自己网站的延迟加载。

相关文章

写给所有做网站的朋友的一封信

写给所有做网站的朋友的一封信

现在就开始执行“1+N”营销推广和没有开始执行的人,一两天看不出任何区别; 一两个月看来差异也是微乎其微的;但在2-5年的长远时间来看的时候,你的高质 量询盘不断增加,你的互联网资产已经建立完成,对手已经很难匹敌,现在你看到这段文字的时候就是最好的开始,现在就是最好的时候,马上开始“1+N”体系的整体营销推广吧,我们和你一起,开创互联网营销大未来!

点击查看详情

准备开启WordPress网站建设推广?

我们相信高端漂亮的网站不应该是昂贵的,这就是wordpress对每个人都是免费的原因
wordpress建站免费入门,并提供价格合理的wordpress建站套餐。