Lazyload Lazysizes.js Support HTTPS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/04/2019

Lazyload Lazysizes.js Support HTTPS - Kini lazyload untuk image dan iframe dari lazysizes sudah bisa support HTTPS sehingga bisa secara otomatis memperbaiki mixed content di blog.

Sebenarnya ini berawal dari mixed content yang terjadi di template Kompi Flexible v8 ketika blog menggunakan logo image untuk logo blog.

Entah kenapa Blogger saat ini tidak/belum support HTTPS untuk logo image di header blog. Saat kita mengupload logo image untuk logo blog di header melalui tata letak, URL image masih menggunakan HTTP.

Untuk itu, saya merubah sedikit pada lazsizes.js yang digunakan pada template Kompi Flexible v8.30 untuk lazyload image agar bisa memperbaiki mixed content secara otomatis.

Saya menambahkan sedikit kode pada lazysizes.js agar dapat merubah http:// atau https:// pada image maupun iframe menjadi // sehingga jika ada gambar blogger atau iframe yang menggunakan http:// tidak akan menyebabkan mixed content.

Coba cek pada demo ini, image dan iframe masih menggunakan http:// dan menggunakan lazysizes.js yang belum support HTTPS. Image masih tampil dan iframe di bawah image tidak tampil, dan HTTPS pada address bar menjadi tanda seru yang menandakan halaman tersebut terjadi mixed content.

Lalu coba cek pada demo ini, image dan iframe masih menggunakan http:// seperti pada demo sebelumnya, namun menggunakan lazysizes.js yang sudah support HTTPS. Image dan iframe di bawah image bisa tampil tanpa menyebabkan 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}});

Untuk cara menggunakannya simak di sini.

Jika ingin semua gambar support lazyload lazysizes.js secara otomatis tanpa mengeditnya secara manual, silahkan gunakan script berikut untuk menambahkan class='lazyload' pada 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");

Semoga bermanfaat.