WordPress非插件延迟加载图片

图片延迟加载可以提升网站的用户体验,节约服务器带宽。在Wordpress系统开启图片延迟加载的方法很多,最便捷的方法是使用插件,例如BJ Lazy LoadLazy Load,但自身的定制化程度太低,有时还存在插件与系统版本不兼容问题。

一个比较好的方法是使用jQuery.lazyload.js,其本身是依赖于jQuery库的一个轻量级插件,可以很方便的在Wordpress上产生图片延迟加载效果,避免使用其他Wordpress插件。具体的使用方法如下:

js调用

在官方下载对于的js,并添加在Wordpress主题的头部,代码如下:

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
effect:"fadeIn"
});
});
</script>

图片地址标签设置

将图片原始链接使用data-original,而使用一张体积很小的gif图片作为占位图。在Wordpress中,将如下代码添加到function.php中可以实现图片地址的全局动态替换:

add_filter ('the_content', 'lazyload');
function lazyload($content) {
$loadimg_url=get_bloginfo('template_directory').'/img/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;
}

完成以上代码,图片延时加载的效果就可以呈现了。此外还可以修改其他一些参数,包括图片加载临界值、图片加载激发事件、效果等,请参考官网,此处从略。


除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/wordpress-fei-cha-jian-yan-chi-jia-zai-tu-pian/

暂无评论