给Wordpress加上懒加载,优化用户访问体验!

原贴地址:https://www.qcgzxw.cn/2532.html

自己要用的,先转载收藏了。

通常来说,一个正常web页面是由图片和文字以及各种CSS,JS构成,而这其中,拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载,边浏览边加载,从而减轻服务器压力以及减轻流量的浪费。

首先在主题引入JS

<script src="<?php%20echo%20get_template_directory_uri();%20?>/js/jquery.min.js" type="text/javascript"></script>//主题中已引用Jquery可省略这行
<script src="<?php%20echo%20get_template_directory_uri();%20?>/js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $("img").lazyload({
            effect:"fadeIn"
                  });
        $("img").lazyload({ threshold : 200 });
        });
</script>
为图片自动添加 data-original 属性
在主题文件夹function.php文件夹加入以下函数
//小文's blog图片链接添加data-original 属性函数
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/images/loading.gif';//loading图片地址,根据个人情况修改
    if(!is_feed()||!is_robots) {
        $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1src=\"$loadimg_url\" data-original=\"\$2\"\$3>\n<noscript>\$0</noscript>",$content);
    }
    return $content;
}
//END
最后在主题文件夹的/images/文件夹下添加loading.gif图片
文件所需要的东西已经全部上传到共享网盘了!
最后修改:2018 年 12 月 26 日 04 : 20 PM
如果觉得我的文章对你有用,请随意赞赏

4 条评论

  1. ohmyga

    我是觉得加不加都一样

    1. 英雄大人
      @ohmyga

      不不不不,我那个站没备案,是香港小水管,禁不住大流量!

  2. Quanyin

    现在基本上大多数主题都自带 lazyload 懒加载了

    1. 英雄大人
      @Quanyin

      我购买的一个主题没有加 很难受。。

发表评论 取消回复