现在的位置:首页>wordpress>正文

纯代码实现WordPress站内文章图片与头像添加按需加载功能

2017年04月05日 ⁄ 共 9209字 暂无评论

按需加载,在福利老幺看来,和图像延迟加载,还是有一定的区别的,但效果差不多,目前针对wordpress的图像延迟加载插件,市面上有很多,不过像这样的功能,福利老幺建议大家还是通过代码来实现好一些.今天刚好看到一个纯代码实现WordPress站内文章图片与头像添加按需加载功能,一起来看看.

先来说一个重点,网上有高手将按需加载功能重写了一遍,使其适合所有人使用,你甚至只需要直接复制君子不器提供的代码就可以实现了.连头像都是按需加载的,默认情况下只会加载你当前屏幕可视区域内的图片,而不在屏幕可视区域内的图片和头像是不会加载的,只有当你将页面往下滚动的时候才会将图片加载出来。

WordPress文章图片与头像按需加载功能的实现

按需加载说起来好像很高大上,其实实现起来一点都不难,只要你按照提供的代码一步步操作,那么可以保证,你绝对可以实现你网站上所有文章图片和头像都有按需加载的效果,无论你使用的是哪种WordPress主题都是如此。

步骤一:添加PHP代码

请将下面贴出的PHP代码复制一下,然后粘贴到你当前WordPress主题的模板函数(functions.php)文件中保存即可.

  1. /**
  2.  * 文章标题:WordPress纯代码:为WordPress所有文章图片与头像添加按需加载功能(适用所有主题)
  3.  * 文章链接:http://www.fuli121.com
  4.  */
  5. add_filter( 'the_content', 'junzibuqi_lazyload_image', 99 );
  6. add_filter( 'post_thumbnail_html', 'junzibuqi_lazyload_image', 11 );
  7. add_filter( 'get_avatar', 'junzibuqi_lazyload_image', 11 );
  8. function junzibuqi_lazyload_image( $content ) {
  9.         if( is_feed() || is_preview() ){
  10.             return $content;
  11.         }
  12.         if ( false !== strpos$content, 'lazyload' ) ){
  13.             return $content;
  14.         }
  15.         $content = preg_replace_callback( '#<(img)([^>]+?)(>(.*?)</\\1>|[\/]?>)#si', 'junzibuqi_process_image', $content );
  16.         return $content;
  17. }
  18. function junzibuqi_process_image( $matches ) {
  19.         $placeholder_image = 'data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
  20.         $old_attributes_str = $matches[2];
  21.         $img = wp_kses_hair( $old_attributes_str, wp_allowed_protocols() );
  22.         if ( emptyempty$img['src'] ) ) {
  23.             return $matches[0];
  24.         }
  25.         $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'] . '" />';
  26.         return $html;
  27. }

步骤二:添加CSS代码

请将下面贴出的CSS代码复制一下,然后粘贴到你当前WordPress主题的主样式表(style.css)文件中保存即可。

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

步骤三:添加JS代码

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

  1. /** 
  2.   * 文章标题:WordPress纯代码:为WordPress所有文章图片与头像添加按需加载功能(适用所有主题) 
  3.   * 文章链接:http://www.fuli121.com
  4.   */
  5. !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主题文章列表缩略图按需加载:

原本没打算写这个,但考虑到咱们国内WordPress主题圈子比较乱,各种自定义函数调用缩略图输出,导致img标签属性不统一,因此只好特意写一下关于WordPress文章列表缩略图延迟加载的问题。

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

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

 

 

小结

文章中的方法来源自网络,由福利老幺整理发布.

事实上,现在支持图像最后加载的插件,有很多,不过很多是在做其它功能的时候,顺便把这个功能也实现了,像福利老幺之前介绍过的wordpress缓存优化插件WP Rocket使用教程,就具有这个功能,需要的朋友,可以去看看.

给我留言