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

上一篇:

下一篇:

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

本文地址:https://www.themepark.com.cn/wordpresstpyjzdsx.html

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园
WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

相关文章

文章评论

您好!请登录

取消回复

    个人中心我的

    联系我们x

    联系我们,从qq在线客服,电话和邮件

    售前客服-1[点击对话]

    购买之前想要了解和咨询

    售前客服-2[点击对话]

    购买之前想要了解和咨询

    售后客服[售后支持]

    购买后输入订单号加好友

    咨询热线:0731-8578 7193

    联系邮箱:
    info@themepark.com.cn

    请注意:在线客服以及咨询热线请在 工作日的9:30~18:00来电咨询 电子邮件在任何时间都会回复

    客服
    回到顶部 顶部