Ads

Lazy Load Gambar untuk Blog

Tutor kali ini saya akan membagikan "Cara Membuat Lazy Load untuk Blog". Dan sebelum melanjutkan mari kita bahas apa itu Lazy load.

Lazy Load berfungsi untuk menunda gambar untuk tampil saat halaman sedang loading. Jadi gambar akan muncul saat halaman tersebut sudah selesai Loading.

Lazy Load Gambar untuk Blog

Lazy Load Gambar untuk Blog
Dagruel

Pertama cari tag <img> di dalam template kalian, tampilan nya kurang lebih seperti ini.

<img alt='Title Image' src='Url Gambar' title='Title Image'/>

Jika sudah tambahkan class='lazy' ganti src dengan data-src kemudian tambahkan ini src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=' setelah data-src=''.

Kurang lebih tampilan nya seperti ini.

<img class='lazy' alt='titleImage'  data-src='urlImage'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=' title='titleImage'/>
Catatan untuk Blogger tambahkan expr: di awal attribute contoh seperti di bawah.
<img class='lazy' expr:alt='titleImage'  expr:data-src='urlImage'  expr:src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=' expr:title='titleImage'/>

Ubah lah setiap tag <img> yang ingin gambar nya di terapkan dengan lazy load seperti di atas.

Dan inilah bagian penting nya script nya, Script nya ada 2 jadi pilih salah satu saja ya. Tempelkan di atas tag </body>

Lazy Load Aktif saat halaman sudah Terload

Script ini langsung menampilkan gambar setelah Halaman Terload.

<script type='text/javascript'>
//<![CDATA[
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;}('t b=["\\e\\s\\g\\q\\d\\d\\H\\d\\q\\h\\m","\\d\\h\\w\\u","\\r\\c\\a\\y\\d\\c\\n\\c\\l\\a\\e\\B\\u\\x\\d\\h\\e\\e\\A\\h\\n\\c","\\d\\c\\l\\r\\a\\v","\\m\\h\\a\\h\\z\\e\\g\\s","\\r\\c\\a\\o\\a\\a\\g\\j\\k\\p\\a\\c","\\e\\g\\s","\\e\\c\\a\\o\\a\\a\\g\\j\\k\\p\\a\\c","\\g\\c\\n\\q\\C\\c\\o\\a\\a\\g\\j\\k\\p\\a\\c","\\k\\j\\l\\m"];$(I)[b[9]](b[0],G(){t i=D[b[2]](b[1]);E(t f=0;f<i[b[3]];f++){F(i[f][b[5]](b[4])){i[f][b[7]](b[6],i[f][b[5]](b[4]));i[f][b[8]](b[4])}}})',45,45,'||||||||||x74|_0x4af0|x65|x6C|x73|_0x5977x2|x72|x61|_0x5977x1|x69|x62|x6E|x64|x6D|x41|x75|x6F|x67|x63|var|x79|x68|x7A|x43|x45|x2D|x4E|x42|x76|document|for|if|function|x20|window'.split('|'),0,{}));
//]]>
</script>

Lazy Load Aktif saat Halaman Di Scroll kebawah

Jika Halaman belum di scroll maka gambar tidak akan muncul, baru muncul setelah di scroll kebawah.

<script type='text/javascript'>
//<![CDATA[
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;}('p a=["\\f\\h\\F\\s","\\k\\b\\9\\t\\f\\b\\j\\b\\r\\9\\d\\v\\s\\u\\f\\h\\d\\d\\w\\h\\j\\b","\\f\\b\\r\\k\\9\\z","\\A\\h\\9\\h\\y\\d\\e\\o","\\k\\b\\9\\m\\9\\9\\e\\i\\n\\l\\9\\b","\\d\\e\\o","\\d\\b\\9\\m\\9\\9\\e\\i\\n\\l\\9\\b","\\e\\b\\j\\q\\x\\b\\m\\9\\9\\e\\i\\n\\l\\9\\b","\\d\\o\\e\\q\\f\\f"];$(G)[a[8]](E(){p g=B[a[1]](a[0]);C(p c=0;c<g[a[2]];c++){D(g[c][a[4]](a[3])){g[c][a[6]](a[5],g[c][a[4]](a[3]));g[c][a[7]](a[3])}}})',43,43,'|||||||||x74|_0x9ac6|x65|_0x6edax2|x73|x72|x6C|_0x6edax1|x61|x69|x6D|x67|x75|x41|x62|x63|var|x6F|x6E|x79|x45|x43|x42|x4E|x76|x2D|x68|x64|document|for|if|function|x7A|window'.split('|'),0,{}))
//]]>
</script>

Setelah di terapkan coba cek blog kalian apakah berhasil? Jika iya maka selamat.

Dan yang belum berhasil silahkan coret-coret di kolom komentar akan saya bantu. Sekian dari saya Terima Kasih.

2 komentar

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!