2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog - Hallo sahabat alexanderwattley, Pada Artikel yang anda baca kali ini dengan judul 2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blog, Artikel Blogspot, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : 2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog
link : 2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog

2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog

Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog. Setelah membahas Cara Mempercepat Loading Iklan Adsense Meggunakan Script Lazy Load, sekarang kita akan membahas Lazy Load untuk menunda request data pada gambar di dalam blog.

Fungsi dari lazy load ini akan menunda request data gambar pada blog selama loading blog dan hanya diekseskusi pada ketika loading blog sudah selesai dan melaksanakan scrolling pada browser tersebut. Makara dengan memasang script yang satu ini akan menciptakan blog kita menjadi fast loading.

Cara Mempercepat Loading Blog Dengan Script Lazy Load Gambar Di Blogspot (Blogger.com)

A. Lazy Load Gambar Secara Otomatis

Dengan memakai script ini, maka kita tidak perlu repot repot untuk melaksanakan seleksi data gambar yang ingin di beri perintah lazy load. Sebab script ini secara otomatis akan menyeleksi semua tag gambar <img>.

1. Buka blog kalian dan masuk ke sajian "Tema" kemudian klik "Edit HTML"
2. Copy javascript berikut ini kemudian letakkan sempurna di atas isyarat </body>

<script type='text/javascript'>//<![CDATA[ (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"alexanderwattley.blogspot.com/search?q=cara-mempercepat-loading-iklan-adsense-di-blog" target="_blank">Cara Mempercepat Loading Iklan Adsense Meggunakan Script Lazy Load 
Cara Mengubah Widget Popular Post Menjadi Keren
 
Pengertian Apa Itu SEO Beserta Jenis Dan Manfaatnya Bagi Website
   
 
 B. Lazy Load Gambar Secara Manual Ala Igniel
 Berbeda dengan script sebelumnya, script yang satu ini hanya akan berfungsi pada gambar yang diberi class "lazy" dan mengganti src pada tag gambar dengan menambahkan atribut data-src. Untuk lebih lengkapnya silahkan ikuti tutorial berikut.
 
 1. Masuk ke blog, pilih sajian "Tema" dan klik "Edit HTML".
 2. Setelah cari isyarat tag <img> untuk gambar thumbnail blog kalian pada template tersebut.
 Setiap template mempunyai isyarat yang berbeda
 
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/>
 
 3. Jika kalian sudah menemukan isyarat tersebut, silahkan edit menyerupai ini:
 
 Tambahkan atribut class='lazy' kedalam tag <img>
 Ubah atribut expr:src menjadi expr:data-src pada tag <img>
 Kemudian tambahkan isyarat ini juga kedalam tag <img>
 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIPYoX9yZtyEQrFf5w71BTcM8nsP3Pr-tBH4LMDd8OslbqO43K8Biylz0HJFegf0NUhH3IaQJPHpRLZ80-iwrik_c9nIq6JsrB5sSIcFBTnWQiS5oCLbvDw4-20-jBJvpHJR1SuNawswXU/s1600/loadme.gif
 
 Jika sudah selesai, maka hasil final dari isyarat tersebut akan menjadi menyerupai ini.
 
<img class='lazy' expr:alt='data:post.title' expr:data-src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIPYoX9yZtyEQrFf5w71BTcM8nsP3Pr-tBH4LMDd8OslbqO43K8Biylz0HJFegf0NUhH3IaQJPHpRLZ80-iwrik_c9nIq6JsrB5sSIcFBTnWQiS5oCLbvDw4-20-jBJvpHJR1SuNawswXU/s1600/loadme.gif'/>
 
 4. Selanjutnya kalian copy isyarat dibawah ini dan letakkan di atas kode </body> kemudian klik tombol "Simpan tema".
 
<script type='text/javascript'>//<![CDATA[ function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{})); //]]></script>
 
 Setelah itu silahkan cek blogmu untuk memastikannya. Kalian juga sanggup menggunajan tool khusus untuk test kecepatan blog kalian di GTMetrix dan Pagespeed Insight
 
 Script ini tidak hanya untuk digunakan ada gambar thumbnail blog saja, melainkan kita juga sanggup menggunakannya pada popular post dan juga featured post. Untuk pengaplikasiannya juga sama menyerupai di atas.



Demikianlah Artikel 2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog
Sekianlah artikel 2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.


Anda sekarang membaca artikel 2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog dengan alamat link https://alexanderwattley.blogspot.com/2010/07/2-cara-memasang-lazy-load-gambar-di.html

Share this post