给博客添加 lazyload 图片预加载特效

Mr.Wu 96 1

前言

远方的雪山 这个站不知道你们看到过没?
自从看到这个站后,我就发现有些时候,特效能让你显得更上档次一些呢;
lazyload 图片预加载功能 预加载,顾名思义,在超出网站可视范围内,图片不做加载,等到用户滚动浏览器窗口,图片元素到达可视范围内,开始加载图片,这样的方式可以大大的节省网站的资源和加快网站加载的速度;
俺博客,不吹不黑的说,秒开的有么有?所以这项功能其实和我半毛钱关系没有。。。
奈何我总感觉图片有个加载的动画总感觉特效帅哒哒,所以咱们不为功能,只为特效,将它给加上~

lazyload 图片预加载功能添加

使用方法也非常的简单;
1.在 wordpress 主题文件夹的 JS 文件夹下面新建一个名为 jquery.lazyload.min.js 的文件,并添加下方的 JS 代码:

/*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
//图片延迟加载
jQuery(document).ready(  
function($){  
    $(".entry-content img").lazyload({ //这里表示lazyload中的背景图片在这些元素中
        effect: "fadeIn",//加载时的动画效果为淡入
    });
});  

2.将下面代码添加到主题头部 header.php 模板中

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script> //引用jquery.min.js 基本都默认引用了,如果没引用就加上这个
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script>// 调用刚才我们新建的那个JS文件

3.为图片自动添加 data-original 属性 ( 注意代码中注释说明,需要添加加载动画图片 )
按官网的要求插入图片时必须添加一个 data-original 属性,手动添加很麻烦,还好有人已提供自动为图片添加 data-original 属性的方法,将下面代码添加到主题 functions.php 中

//图片预加载特效
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    //下面是加载动画图片地址,你可以将我的动画下载下来,保存到你主题的images文件夹下,名字叫post_loading.gif
    //我的动画地址:https://oss.mrwu.red/wp-content/themes/mkBlog/images/post_loading.gif
    $loadimg_url=get_bloginfo('template_directory').'/images/post_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;
}

接下来关闭网站缓存功能,然后清除网站缓存,在刷新你的网站文章图片页面,即可看到效果
如果没有效果,可以在图片上单机右键,审查元素,然后看下 HTML 代码结构是否与我的一样

//如果你博客有图片灯箱功能,那么就有 a 标签,如果没有,那就没有 a 标签
<a data-fancybox="images" data-no-instant="true" href="图片原始地址">
<img loading="lazy" class="图片标签样式" data-original="图片原始地址" src="图片加载动画" width="835" height="772" style="display: block;"></a>

4.我遇到的小问题说明
在添加过程中我遇到一个小问题,a 标签获得的 src 图片地址是动画的地址,导致图片全部都只显示动画图片,不显示原图,并且图片灯箱功能也用不了
经过排查代码发现,我之前添加的给图片添加 A 标签的代码中,写的是 a 标签的 src 地址获取的是 img 标签的 src 地址,这就能说的通了
因此我将代码改成获取 Img 标签的 data-original 属性地址,瞬间完美
第二个小问题估计很多人也遇到过,就是加载动画图片大小问题,会变的非常大,这个更好解决,只需要给你的 img 标签添加一个 style 属性 width: auto; 即可

打赏
发表评论 取消回复
表情 图片 链接 代码

  1. c0sMx
    c0sMx Lv 2

    哈哈,Nice.[aru_1]

分享
微信
微博
QQ