WordPress教程:为所有文章图片与头像添加延迟加载功能

2017年12月24日     tovey    

延迟加载,也叫异步加载,也就是并非一次把图片加载完,中间有一段缓冲,程序会判断,只有在图片即将被浏览到的时候才开始加载图片;最终呈现的效果就是wordpress图片随着右侧滚动条的下拉出现,而这中间一段时间则被节省下来做其它的事情,所以这是一个既华丽又实用的功能,尤其是网页图片较多的朋友不妨一试。

此功能通过某些插件可以轻松实现,本文主要介绍的为纯代码方式。理论上支持所有网站使用,你甚至只需要直接复制智行网提供的代码就可以实现了。

添加PHP代码

复制以下代码,然后粘贴到你当前WordPress主题的模板函数(functions.php)文件中保存。

  1. /**
  2.  * WordPress教程:为所有文章图片与头像添加延迟加载功能
  3.  * 文章作者:智行网
  4.  * 文章链接:https://52zhixing.cn/7766/
  5.  */
  6. add_filter( ‘the_content’, ‘zhixing_lazyload_image’, 99 );
  7. add_filter( ‘post_thumbnail_html’, ‘zhixing_lazyload_image’, 11 );
  8. add_filter( ‘get_avatar’, ‘zhixing_lazyload_image’, 11 );
  9. function zhixing_lazyload_image( $content ) {
  10. if( is_feed() || is_preview() ){
  11. return $content;
  12.         }
  13. if ( false !== strpos$content, ‘lazyload’ ) ){
  14. return $content;
  15.         }
  16. $content = preg_replace_callback( ‘#<(img)([^>]+?)(>(.*?)</\\1>|[\/]?>)#si’, ‘zhixing_process_image’, $content );
  17. return $content;
  18. }
  19. function zhixing_process_image( $matches ) {
  20. $placeholder_image = ‘data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==’;
  21. $old_attributes_str = $matches[2];
  22. $img = wp_kses_hair( $old_attributes_str, wp_allowed_protocols() );
  23. if ( emptyempty$img[‘src’] ) ) {
  24. return $matches[0];
  25.         }
  26. $html = ‘<img width=“‘ . $img[‘width’][‘value’]. ‘” height=“‘ . $img[‘height’][‘value’] . ‘” data-sizes=“auto” class=“lazyload ‘ . $img[‘class’][‘value’] . ‘” alt=“‘ . get_the_title() . ‘” src=“‘ . $placeholder_image . ‘” data-src=“‘ . $img[‘src’][‘value’] . ‘” data-srcset=“‘ . $img[‘srcset’][‘value’] . ‘” sizes=“‘ . $img[‘sizes’][‘value’] . ‘” />’;
  27. return $html;
  28. }

添加CSS代码

复制以下代码,然后粘贴到你当前WordPress主题的主样式表(style.css)文件中保存。

  1. .lazyload,
  2. .lazyloading {
  3.     opacity: 0;
  4. }
  5. .lazyloaded {
  6.     opacity: 1;
  7.     transition: opacity 300ms;
  8. }

添加JS代码

复制以下代码,然后粘贴到你当前WordPress主题全站调用的JS文件中保存即可。

  1. /** 
  2.  * WordPress教程:为所有文章图片与头像添加延迟加载功能
  3.  * 文章作者:智行网
  4.  * 文章链接:https://52zhixing.cn/7766/
  5.   */
  6. !function(a,b){var c=b(a,a.document);a.lazySizes=c,“object”==typeof module&&module.exports&&(module.exports=c)}(window,function(a,b){“use strict”;if(b.getElementsByClassName){var c,d=b.documentElement,e=a.Date,f=a.HTMLPictureElement,g=“addEventListener”,h=“getAttribute”,i=a[g],j=a.setTimeout,k=a.requestAnimationFrame||j,l=a.requestIdleCallback,m=/^picture$/i,n=[“load”,“error”,“lazyincluded”,“_lazyloaded”],o={},p=Array.prototype.forEach,q=function(a,b){return o[b]||(o[b]=new RegExp(“(\\s|^)”+b+“(\\s|$)”)),o[b].test(a[h](“class”)||“”)&&o[b]},r=function(a,b){q(a,b)||a.setAttribute(“class”,(a[h](“class”)||“”).trim()+” “+b)},s=function(a,b){var c;(c=q(a,b))&&a.setAttribute(“class”,(a[h](“class”)||“”).replace(c,” “))},t=function(a,b,c){var d=c?g:“removeEventListener”;c&&t(a,b),n.forEach(function(c){a[d](c,b)})},u=function(a,c,d,e,f){var g=b.createEvent(“CustomEvent”);return g.initCustomEvent(c,!e,!f,d||{}),a.dispatchEvent(g),g},v=function(b,d){var e;!f&&(e=a.picturefill||c.pf)?e({reevaluate:!0,elements:[b]}):d&&d.src&&(b.src=d.src)},w=function(a,b){return(getComputedStyle(a,null)||{})[b]},x=function(a,b,d){for(d=d||a.offsetWidth;d<c.minSize&&b&&!a._lazysizesWidth;)d=b.offsetWidth,b=b.parentNode;return d},y=function(){var a,c,d=[],e=function(){var b;for(a=!0,c=!1;d.length;)b=d.shift(),b[0].apply(b[1],b[2]);a=!1},f=function(f){a?f.apply(this,arguments):(d.push([f,this,arguments]),c||(c=!0,(b.hidden?j:k)(e)))};return f._lsFlush=e,f}(),z=function(a,b){return b?function(){y(a)}:function(){var b=this,c=arguments;y(function(){a.apply(b,c)})}},A=function(a){var b,c=0,d=125,f=666,g=f,h=function(){b=!1,c=e.now(),a()},i=l?function(){l(h,{timeout:g}),g!==f&&(g=f)}:z(function(){j(h)},!0);return function(a){var f;(a=a===!0)&&(g=44),b||(b=!0,f=d-(e.now()-c),0>f&&(f=0),a||9>f&&l?i():j(i,f))}},B=function(a){var b,c,d=99,f=function(){b=null,a()},g=function(){var a=e.now()-c;d>a?j(g,d-a):(l||f)(f)};return function(){c=e.now(),b||(b=j(g,d))}},C=function(){var f,k,l,n,o,x,C,E,F,G,H,I,J,K,L,M=/^img$/i,N=/^iframe$/i,O=“onscroll”in a&&!/glebot/.test(navigator.userAgent),P=0,Q=0,R=0,S=-1,T=function(a){R–,a&&a.target&&t(a.target,T),(!a||0>R||!a.target)&&(R=0)},U=function(a,c){var e,f=a,g=“hidden”==w(b.body,“visibility”)||“hidden”!=w(a,“visibility”);for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=d;)g=(w(f,“opacity”)||1)>0,g&&“visible”!=w(f,“overflow”)&&(e=f.getBoundingClientRect(),g=H>e.left&&G<e.right&&I>e.top-1&&F<e.bottom+1);return g},V=function(){var a,e,g,i,j,m,n,p,q;if((o=c.loadMode)&&8>R&&(a=f.length)){e=0,S++,null==K&&(“expand”in c||(c.expand=d.clientHeight>500&&d.clientWidth>500?500:370),J=c.expand,K=J*c.expFactor),K>Q&&1>R&&S>2&&o>2&&!b.hidden?(Q=K,S=0):Q=o>1&&S>1&&6>R?J:P;for(;a>e;e++)if(f[e]&&!f[e]._lazyRace)if(O)if((p=f[e][h](“data-expand”))&&(m=1*p)||(m=Q),q!==m&&(C=innerWidth+m*L,E=innerHeight+m,n=-1*m,q=m),g=f[e].getBoundingClientRect(),(I=g.bottom)>=n&&(F=g.top)<=E&&(H=g.right)>=n*L&&(G=g.left)<=C&&(I||H||G||F)&&(l&&3>R&&!p&&(3>o||4>S)||U(f[e],m))){if(ba(f[e]),j=!0,R>9)break}else!j&&l&&!i&&4>R&&4>S&&o>2&&(k[0]||c.preloadAfterLoad)&&(k[0]||!p&&(I||H||G||F||“auto”!=f[e][h](c.sizesAttr)))&&(i=k[0]||f[e]);else ba(f[e]);i&&!j&&ba(i)}},W=A(V),X=function(a){r(a.target,c.loadedClass),s(a.target,c.loadingClass),t(a.target,Z)},Y=z(X),Z=function(a){Y({target:a.target})},$=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},_=function(a){var b,d,e=a[h](c.srcsetAttr);(b=c.customMedia[a[h](“data-media”)||a[h](“media”)])&&a.setAttribute(“media”,b),e&&a.setAttribute(“srcset”,e),b&&(d=a.parentNode,d.insertBefore(a.cloneNode(),a),d.removeChild(a))},aa=z(function(a,b,d,e,f){var g,i,k,l,o,q;(o=u(a,“lazybeforeunveil”,b)).defaultPrevented||(e&&(d?r(a,c.autosizesClass):a.setAttribute(“sizes”,e)),i=a[h](c.srcsetAttr),g=a[h](c.srcAttr),f&&(k=a.parentNode,l=k&&m.test(k.nodeName||“”)),q=b.firesLoad||“src”in a&&(i||g||l),o={target:a},q&&(t(a,T,!0),clearTimeout(n),n=j(T,2500),r(a,c.loadingClass),t(a,Z,!0)),l&&p.call(k.getElementsByTagName(“source”),_),i?a.setAttribute(“srcset”,i):g&&!l&&(N.test(a.nodeName)?$(a,g):a.src=g),(i||l)&&v(a,{src:g})),y(function(){a._lazyRace&&delete a._lazyRace,s(a,c.lazyClass),(!q||a.complete)&&(q?T(o):R–,X(o))})}),ba=function(a){var b,d=M.test(a.nodeName),e=d&&(a[h](c.sizesAttr)||a[h](“sizes”)),f=“auto”==e;(!f&&l||!d||!a.src&&!a.srcset||a.complete||q(a,c.errorClass))&&(b=u(a,“lazyunveilread”).detail,f&&D.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,R++,aa(a,b,f,e,d))},ca=function(){if(!l){if(e.now()-x<999)return void j(ca,999);var a=B(function(){c.loadMode=3,W()});l=!0,c.loadMode=3,W(),i(“scroll”,function(){3==c.loadMode&&(c.loadMode=2),a()},!0)}};return{_:function(){x=e.now(),f=b.getElementsByClassName(c.lazyClass),k=b.getElementsByClassName(c.lazyClass+” “+c.preloadClass),L=c.hFac,i(“scroll”,W,!0),i(“resize”,W,!0),a.MutationObserver?new MutationObserver(W).observe(d,{childList:!0,subtree:!0,attributes:!0}):(d[g](“DOMNodeInserted”,W,!0),d[g](“DOMAttrModified”,W,!0),setInterval(W,999)),i(“hashchange”,W,!0),[“focus”,“mouseover”,“click”,“load”,“transitionend”,“animationend”,“webkitAnimationEnd”].forEach(function(a){b[g](a,W,!0)}),/d$|^c/.test(b.readyState)?ca():(i(“load”,ca),b[g](“DOMContentLoaded”,W),j(ca,2e4)),f.length?(V(),y._lsFlush()):W()},checkElems:W,unveil:ba}}(),D=function(){var a,d=z(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+=“px”,a.setAttribute(“sizes”,d),m.test(b.nodeName||“”))for(e=b.getElementsByTagName(“source”),f=0,g=e.length;g>f;f++)e[f].setAttribute(“sizes”,d);c.detail.dataAttr||v(a,c.detail)}),e=function(a,b,c){var e,f=a.parentNode;f&&(c=x(a,f,c),e=u(a,“lazybeforesizes”,{width:c,dataAttr:!!b}),e.defaultPrevented||(c=e.detail.width,c&&c!==a._lazysizesWidth&&d(a,f,e,c)))},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)e(a[b])},g=B(f);return{_:function(){a=b.getElementsByClassName(c.autosizesClass),i(“resize”,g)},checkElems:g,updateElem:e}}(),E=function(){E.i||(E.i=!0,D._(),C._())};return function(){var b,d={lazyClass:“lazyload”,loadedClass:“lazyloaded”,loadingClass:“lazyloading”,preloadClass:“lazypreload”,errorClass:“lazyerror”,autosizesClass:“lazyautosizes”,srcAttr:“data-src”,srcsetAttr:“data-srcset”,sizesAttr:“data-sizes”,minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2};c=a.lazySizesConfig||a.lazysizesConfig||{};for(b in d)b in c||(c[b]=d[b]);a.lazySizesConfig=c,j(function(){c.init&&E()})}(),{cfg:c,autoSizer:D,loader:C,init:E,uP:v,aC:r,rC:s,hC:q,fire:u,gW:x,rAF:y}}});

如果你使用的是国内作者制作的WordPress主题,那么基本上这些主题的文章列表缩略图都是使用的自定义函数来输出。

若你想要让你的文章列表缩略图也加上按需加载的效果,那么请找到缩略图输出函数,并且在缩略图输出的img标签的class属性里面加上lazyload,并且将src=xxx改成data-src=xxx,只有这样才能让你的文章列表缩略图具备延迟加载效果。

分类: wordpress教程
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

分享到微信朋友圈

WordPress教程:为所有文章图片与头像添加延迟加载功能

打开微信,点击底部的“发现”
使用“扫一扫”即可将网页分享至朋友圈。

错误: 请输入一个有效的电子邮件地址

错误: 无效的邮箱

错误: 请输入您的姓氏

错误: 请输入你的名字

错误: 请输入用户名

错误: 请输入密码

错误: 请确认您的密码

错误: 密码和密码确认不匹配