非插件(lazysizes)给WordPress做图片延迟加载(lazyload)功能

网站APP 5 年前 回复

, , ,

非插件方式实现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

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)