WordPress纯代码:为WordPress所有文章图片与头像添加按需加载功能(适用所有主题)


WordPress文章图片与头像按需加载功能的作用:

其实图片的按需加载或者说延迟加载并不是什么高大上的功能,但有意思的是,一些WordPress主题作者居然把这个功能当做自己主题的亮点来做宣传,而且代码质量还不怎么样…..

今天君子不器就把自己花时间做的按需加载功能重写了一遍,使其适合所有人使用,你甚至只需要直接复制君子不器提供的代码就可以实现了。

在你打开君子不器网站的http://junzibuqi.com的时候就能看到,君子不器网站上所有图片都是按需加载的,这样不仅加快了页面的加载速度,同时也避免了服务器资源一些没必要的浪费。

1

通过君子不器的网站你就可以发现,君子不器网站上不光是图片。连头像都是按需加载的,默认情况下只会加载你当前屏幕可视区域内的图片,而不在屏幕可视区域内的图片和头像是不会加载的,只有当你将页面往下滚动的时候才会将图片加载出来。

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

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

在进入正题之前还有一点要说一下,请仔细阅读君子不器写的每一个字,不然你实现不了可别说君子不器的代码有问题。

WordPress纯代码:文章图片与头像按需加载功能

君子不器将代码梳理了一下,实现君子不器所说的为WordPress所有文章图片与头像添加按需加载功能,一共要执行三个步骤,请严格按照君子不器提供的步骤来操作。

步骤一:添加PHP代码

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

/**
 * 文章标题:WordPress纯代码:为WordPress所有文章图片与头像添加按需加载功能(适用所有主题)
 * 文章作者:君子不器
 * 文章链接:http://junzibuqi.com/img-lazyload.html
 */
add_filter( 'the_content', 'junzibuqi_lazyload_image', 99 );
add_filter( 'post_thumbnail_html', 'junzibuqi_lazyload_image', 11 );
add_filter( 'get_avatar', 'junzibuqi_lazyload_image', 11 );
function junzibuqi_lazyload_image( $content ) {
		if( is_feed() || is_preview() ){
			return $content;
		}
		if ( false !== strpos( $content, 'lazyload' ) ){
			return $content;
		}
		$content = preg_replace_callback( '#<(img)([^>]+?)(>(.*?)</\\1>|[\/]?>)#si', 'junzibuqi_process_image', $content );
		return $content;
}
function junzibuqi_process_image( $matches ) {
		$placeholder_image = 'data:image/png;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
		$old_attributes_str = $matches[2];
		$img = wp_kses_hair( $old_attributes_str, wp_allowed_protocols() );
		if ( empty( $img['src'] ) ) {
			return $matches[0];
		}
		$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'] . '" />';
		return $html;
}

步骤二:添加CSS代码

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

.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

步骤三:添加JS代码

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

/** 
  * 文章标题:WordPress纯代码:为WordPress所有文章图片与头像添加按需加载功能(适用所有主题) 
  * 文章作者:君子不器
  * 文章链接:http://junzibuqi.com/img-lazyload.html
  */
!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,只有这样才能让你的文章列表缩略图具备延迟加载效果。

分享您对本文的看法!
喜欢 喜欢
13
喜欢
不懂 不懂
3
不懂
膜拜 膜拜
15
膜拜
蛋疼 蛋疼
4
蛋疼
好奇 好奇
6
好奇
逗比 逗比
4
逗比
有才 有才
11
有才
开心 开心
2
开心
可怕 可怕
1
可怕
WordPress纯代码:为WordPress所有文章图片与头像添加按需加载功能(适用所有主题)

万事不求人,做最全面的自己!

评论 7

  1. 好吧 其实还是需要用到那个JS 其实说白了 只要是一个img 给它一个class就可以了并且修改src为data-src 但是原作者的JS貌似是需要给图片添加data-origin

    1. 我分享的代码是支持img标签的srcset属性,国内大部分主题的lazyload是不支持的,为了适用所有主题,我专门修改了代码,你自己看下我网站图片的链接结构就会明白了

分享下您的观点

您填写的邮箱不会被公开,邮箱仅用于获取您的Gravatar头像

登录

重置密码

再次尝试?
登录