非插件方式实现WordPress延迟加载功能,用到lazysizes这个js,优点是小,并且不需要jQuery。
首先引入lazysizes:
wp_enqueue_script( 'lazysizes-script','https://cdn.jsdelivr.net/combine/npm/lazysizes@5.2.0', array(), null, true );
图片参加class:
/**
* lazyload
* https://github.com/aFarkas/lazysizes
*/
add_filter ('the_content', 'lazyload');
function lazyload($content) {
if(!is_feed()||!is_robots) {
$content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-src=\"\$2\" src=\"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\"\$3>\n<noscript>\$0</noscript>",$content);
$content=preg_replace('/<img class=[\'"]([^\'"]+)[\'"]/i',"<img class=\"$1 lazyload\"",$content);
}
return $content;
}
原文分享自https://wpmore.cn/%e9%9d%9e%e6%8f%92%e4%bb%b6lazysizes%e7%bb%99wordpress%e5%81%9a%e5%9b%be%e7%89%87%e5%bb%b6%e8%bf%9f%e5%8a%a0%e8%bd%bdlazyload%e5%8a%9f%e8%83%bd.html
声明:本文采用 BY-NC-SA 协议进行授权,如无注明均为原创,转载请注明转自 你好!刘
本文地址:非插件(lazysizes)给WordPress做图片延迟加载(lazyload)功能
本文地址:非插件(lazysizes)给WordPress做图片延迟加载(lazyload)功能
发表评论