Lazyload Lazysizes.js HTTPS
Support - Now lazyload for images and iframes from lazysizes can support HTTPS
so that it can automatically correct mixed content on the blog.
Actually this starts from
the mixed content that occurs in my template when the blog uses the logo image
for the blog logo.
I don't know why Blogger
currently doesn't / doesn't support HTTPS for the logo image in the blog
header. When we upload the logo image for the blog logo in the header through
the layout, the image URL still uses HTTP.
For this reason, I changed
the lazsizes.js bit used in the Flexible v8.30 Kompl template to lazyload
images so that they could correct mixed content automatically.
I added a little code to
lazysizes.js in order to be able to change http: // or https: // in the image
or iframe to // so that if there is a blogger or iframe image using http: // it
will not cause mixed content.
Jika Anda ingin menggunakan lazysizes.js yang support HTTPS, silahkan gunakan script di bawah ini.
!function(e,t){var n=t(e,e.document);e.lazySizes=n,"object"==typeof module&&module.exports&&(module.exports=n)}("undefined"!=typeof window?window:{},function(e,t){"use strict";var n,a;if(function(){var t,n={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,loadHidden:!0,ricTimeout:0,throttleDelay:125};a=e.lazySizesConfig||e.lazysizesConfig||{};for(t in n)t in a||(a[t]=n[t])}(),!t||!t.getElementsByClassName)return{init:function(){},cfg:a,noSupport:!0};var i=t.documentElement,r=e.Date,o=e.HTMLPictureElement,s="addEventListener",l="getAttribute",c=e[s],d=e.setTimeout,u=e.requestAnimationFrame||d,f=e.requestIdleCallback,m=/^picture$/i,y=["load","error","lazyincluded","_lazyloaded"],z={},v=Array.prototype.forEach,h=function(e,t){return z[t]||(z[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")),z[t].test(e[l]("class")||"")&&z[t]},g=function(e,t){h(e,t)||e.setAttribute("class",(e[l]("class")||"").trim()+" "+t)},p=function(e,t){var n;(n=h(e,t))&&e.setAttribute("class",(e[l]("class")||"").replace(n," "))},C=function(e,t,n){var a=n?s:"removeEventListener";n&&C(e,t),y.forEach(function(n){e[a](n,t)})},b=function(e,a,i,r,o){var s=t.createEvent("Event");return i||(i={}),i.instance=n,s.initEvent(a,!r,!o),s.detail=i,e.dispatchEvent(s),s},A=function(t,n){var i;!o&&(i=e.picturefill||a.pf)?(n&&n.src&&!t[l]("srcset")&&t.setAttribute("srcset",n.src),i({reevaluate:!0,elements:[t]})):n&&n.src&&(t.src=n.src)},E=function(e,t){return(getComputedStyle(e,null)||{})[t]},_=function(e,t,n){for(n=n||e.offsetWidth;n<a.minSize&&t&&!e._lazysizesWidth;)n=t.offsetWidth,t=t.parentNode;return n},w=function(){var e,n,a=[],i=[],r=a,o=function(){var t=r;for(r=a.length?i:a,e=!0,n=!1;t.length;)t.shift()();e=!1},s=function(a,i){e&&!i?a.apply(this,arguments):(r.push(a),n||(n=!0,(t.hidden?d:u)(o)))};return s._lsFlush=o,s}(),N=function(e,t){return t?function(){w(e)}:function(){var t=this,n=arguments;w(function(){e.apply(t,n)})}},M=function(e){var t,n=0,i=a.throttleDelay,o=a.ricTimeout,s=function(){t=!1,n=r.now(),e()},l=f&&o>49?function(){f(s,{timeout:o}),o!==a.ricTimeout&&(o=a.ricTimeout)}:N(function(){d(s)},!0);return function(e){var a;(e=e===!0)&&(o=33),t||(t=!0,a=i-(r.now()-n),0>a&&(a=0),e||9>a?l():d(l,a))}},x=function(e){var t,n,a=99,i=function(){t=null,e()},o=function(){var e=r.now()-n;a>e?d(o,a-e):(f||i)(i)};return function(){n=r.now(),t||(t=d(o,a))}},W=function(){var o,u,f,y,z,_,W,L,S,T,F,R,D=/^img$/i,k=/^iframe$/i,H="onscroll"in e&&!/(gle|ing)bot/.test(navigator.userAgent),O=0,P=0,$=0,I=-1,q=function(e){$--,(!e||0>$||!e.target)&&($=0)},U=function(e){return null==R&&(R="hidden"==E(t.body,"visibility")),R||"hidden"!=E(e.parentNode,"visibility")&&"hidden"!=E(e,"visibility")},j=function(e,n){var a,r=e,o=U(e);for(L-=n,F+=n,S-=n,T+=n;o&&(r=r.offsetParent)&&r!=t.body&&r!=i;)o=(E(r,"opacity")||1)>0,o&&"visible"!=E(r,"overflow")&&(a=r.getBoundingClientRect(),o=T>a.left&&S<a.right&&F>a.top-1&&L<a.bottom+1);return o},G=function(){var e,r,s,c,d,f,m,z,v,h,g,p,C=n.elements;if((y=a.loadMode)&&8>$&&(e=C.length)){for(r=0,I++;e>r;r++)if(C[r]&&!C[r]._lazyRace)if(!H||n.prematureUnveil&&n.prematureUnveil(C[r]))ee(C[r]);else if((z=C[r][l]("data-expand"))&&(f=1*z)||(f=P),h||(h=!a.expand||a.expand<1?i.clientHeight>500&&i.clientWidth>500?500:370:a.expand,n._defEx=h,g=h*a.expFactor,p=a.hFac,R=null,g>P&&1>$&&I>2&&y>2&&!t.hidden?(P=g,I=0):P=y>1&&I>1&&6>$?h:O),v!==f&&(_=innerWidth+f*p,W=innerHeight+f,m=-1*f,v=f),s=C[r].getBoundingClientRect(),(F=s.bottom)>=m&&(L=s.top)<=W&&(T=s.right)>=m*p&&(S=s.left)<=_&&(F||T||S||L)&&(a.loadHidden||U(C[r]))&&(u&&3>$&&!z&&(3>y||4>I)||j(C[r],f))){if(ee(C[r]),d=!0,$>9)break}else!d&&u&&!c&&4>$&&4>I&&y>2&&(o[0]||a.preloadAfterLoad)&&(o[0]||!z&&(F||T||S||L||"auto"!=C[r][l](a.sizesAttr)))&&(c=o[0]||C[r]);c&&!d&&ee(c)}},J=M(G),K=function(e){var t=e.target;return t._lazyCache?void delete t._lazyCache:(q(e),g(t,a.loadedClass),p(t,a.loadingClass),C(t,V),void b(t,"lazyloaded"))},Q=N(K),V=function(e){Q({target:e.target})},X=function(e,t){try{e.contentWindow.location.replace(t)}catch(n){e.src=t}},Y=function(e){var t,n=e[l](a.srcsetAttr);(t=a.customMedia[e[l]("data-media")||e[l]("media")])&&e.setAttribute("media",t),n&&e.setAttribute("srcset",n)},Z=N(function(e,t,n,i,r){var o,s,c,u,y,z;(y=b(e,"lazybeforeunveil",t)).defaultPrevented||(i&&(n?g(e,a.autosizesClass):e.setAttribute("sizes",i)),s=e[l](a.srcsetAttr),o=e[l](a.srcAttr).replace(/.*?:\/\//g,"//"),r&&(c=e.parentNode,u=c&&m.test(c.nodeName||"")),z=t.firesLoad||"src"in e&&(s||o||u),y={target:e},g(e,a.loadingClass),z&&(clearTimeout(f),f=d(q,2500),C(e,V,!0)),u&&v.call(c.getElementsByTagName("source"),Y),s?e.setAttribute("srcset",s):o&&!u&&(k.test(e.nodeName)?X(e,o):e.src=o),r&&(s||u)&&A(e,{src:o})),e._lazyRace&&delete e._lazyRace,p(e,a.lazyClass),w(function(){var t=e.complete&&e.naturalWidth>1;z&&!t||(t&&g(e,"ls-is-cached"),K(y),e._lazyCache=!0,d(function(){"_lazyCache"in e&&delete e._lazyCache},9)),"lazy"==e.loading&&$--},!0)}),ee=function(e){if(!e._lazyRace){var t,n=D.test(e.nodeName),i=n&&(e[l](a.sizesAttr)||e[l]("sizes")),r="auto"==i;(!r&&u||!n||!e[l]("src")&&!e.srcset||e.complete||h(e,a.errorClass)||!h(e,a.lazyClass))&&(t=b(e,"lazyunveilread").detail,r&&B.updateElem(e,!0,e.offsetWidth),e._lazyRace=!0,$++,Z(e,t,r,i,n))}},te=x(function(){a.loadMode=3,J()}),ne=function(){3==a.loadMode&&(a.loadMode=2),te()},ae=function(){if(!u){if(r.now()-z<999)return void d(ae,999);u=!0,a.loadMode=3,J(),c("scroll",ne,!0)}};return{_:function(){z=r.now(),n.elements=t.getElementsByClassName(a.lazyClass),o=t.getElementsByClassName(a.lazyClass+" "+a.preloadClass),c("scroll",J,!0),c("resize",J,!0),e.MutationObserver?new MutationObserver(J).observe(i,{childList:!0,subtree:!0,attributes:!0}):(i[s]("DOMNodeInserted",J,!0),i[s]("DOMAttrModified",J,!0),setInterval(J,999)),c("hashchange",J,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){t[s](e,J,!0)}),/d$|^c/.test(t.readyState)?ae():(c("load",ae),t[s]("DOMContentLoaded",J),d(ae,2e4)),n.elements.length?(G(),w._lsFlush()):J()},checkElems:J,unveil:ee,_aLSL:ne}}(),B=function(){var e,n=N(function(e,t,n,a){var i,r,o;if(e._lazysizesWidth=a,a+="px",e.setAttribute("sizes",a),m.test(t.nodeName||""))for(i=t.getElementsByTagName("source"),r=0,o=i.length;o>r;r++)i[r].setAttribute("sizes",a);n.detail.dataAttr||A(e,n.detail)}),i=function(e,t,a){var i,r=e.parentNode;r&&(a=_(e,r,a),i=b(e,"lazybeforesizes",{width:a,dataAttr:!!t}),i.defaultPrevented||(a=i.detail.width,a&&a!==e._lazysizesWidth&&n(e,r,i,a)))},r=function(){var t,n=e.length;if(n)for(t=0;n>t;t++)i(e[t])},o=x(r);return{_:function(){e=t.getElementsByClassName(a.autosizesClass),c("resize",o)},checkElems:o,updateElem:i}}(),L=function(){!L.i&&t.getElementsByClassName&&(L.i=!0,B._(),W._())};return d(function(){a.init&&L()}),n={cfg:a,autoSizer:B,loader:W,init:L,uP:A,aC:g,rC:p,hC:h,fire:b,gW:_,rAF:w}});If you want all images to support lazyload lazysizes.js automatically without editing them manually, please use the following script to add class='lazyload' to the image:
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].removeAttribute("src"),imgEl[i].className+=" lazyload");
May be useful.