wordpress主题建站,选择WEB主题公园中文原创企业网站模板!

WordPress技术博客 news
您现在的位置:首页 > WordPress技术博客 > wordpress图片预加载的实现

本周推荐网站模板

WordPress主题视频教程

最近更新的WordPress主题
最新更新过的网站模板

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的功能了!希望这篇文章对你有所帮助吧!

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园

如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。

============关于WEB主题公园=============

WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

分享WordPress开发,网站维护经验,分享更多有用的WordPress知识

WEB主题公园--做最好的中文原创WordPress主题,网站模版。