Cara Memasang Lazy Load Image di Blogger
January 18, 2020
Lazy Load Image ini sangat baik apabila dipasang di blog karena mempercepat loading gambar-gambar yang tampil di blog anda. Lazy load image ini menggunakan sistem cache.
Pada saat pengunjung membuka situs web anda untuk pertama kalinya, maka dengan begitu browser yang sedang digunakan akan melakukan beberapa permintaan untuk mendownload semua data gambar di blog kamu.
Jadi, jika sudah melakukan download pada saat pertama kali dibuka. Maka jika para pengunjung blog kamu membuka lagi blog kamu maka gambar-gambar tersebut akan cepat tampil di layar hp/pc kamu.
Untuk info lebih jelasnya, mari kita simak berikut ini penjelasan tentang Lazy Load Image.
Apa itu Lazy Load Image?
Lazy Load Image merupakan sebuah script yang berfungsi sebagai penunda pemanggilam file sebelum melakukan proses loading blog yang sedang berlangsung. Jadi sebelum kamu melakukan scroll pada halaman blog script tersebut akan melakukan penundaan pemuatan file blog.Oke, kira-kira seperti itu penjelesana singkatnya tentang Lazy Load Image ini. Baiklah mari kita bersama-sama langsung masuk ke Tutorial Memasang Lazy Load Image di Blogger.
Cara Memasang Lazy Load Image di Blogger
1. Langkah pertama, login ke Blogger.com.2. Pilih Theme/Tema > Edit HTML.
3. Setelah itu cari kode <img>
Setiap template yang digunakan bisa berbeda kode-kodenya, untuk contoh disini saya menggunakan Template VioMagz dan contoh kodenya adalah seperti berikut ini.
<a expr:href='data:post.url'><img expr:alt='data:post.title' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' expr:data='resizeImage(data:post.thumbnailUrl, 420, "300:200")' expr:title='data:post.title'/>4. Juka sudah menemukan kode tersebut, maka selanjutnya kamu haru memperhatikan langkah-langkah berikut ini:
- Pada tag kode <img class kamu tambahkan 'lazy' sehingga: <img class='lazy'
- Ubah kode expr:src menjadi expr:data-src
- Berikutnya kamu tambahkan/ganti isi kode expr:data-src dengan kode dibawah ini.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=
Untuk lebih jelas mengenai hasilnya akan tampak seperti berikut ini.
<div class='img-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, "300:200")' expr:title='data:post.title' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>
</a>
<b:elseif cond='data:post.thumbnailUrl'/>
<a expr:href='data:post.url'><img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, "300:200")' expr:title='data:post.title' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>
</a>
<b:else/>
<a expr:href='data:post.url'><img class='lazy' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyBFOtzuqutCLsQYza6i-pebFNGvY1ezZK7G-b_N7ixOZ4Cax0rz4Sel59_2Cod-7IZ7abP6_2NIbHE8fviGjUgzJ0LjNl89Sfwit2YJiWPFYUjVGMF1DuqPHR9HfDw-wII7TY1QpAPbQm/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>
</a>
</b:if>
</div>5. Berikutnya, atau langkah terakhir dari proses memasang Script Lazy Load Image ini adalah dengan meletakkan kode dibawah ini diatas kode </body>
Untuk Taq Image sekali lagi saya ingatkan setiap template yang kamu gunakan itu berbeda-beda bisa saya lebih dari satu tag image tersebut, untuk itu kamu bisa mencobanya satu per satu taq tersebut;
Untuk mencari Taq Imaga dengan cepat kamu bisa menggunakan Shortcut pencarian yaitu dengan menekan CTRL+F.
Demikianlah artikel kali ini tentang Cara Membuat dan Memasang Script Lazy Load Image di Blog. Semoga artikel ini bermanfaat buat teman-teman semuanya!
<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>6. Save Template dan lihat hasilnya!!!Untuk Taq Image sekali lagi saya ingatkan setiap template yang kamu gunakan itu berbeda-beda bisa saya lebih dari satu tag image tersebut, untuk itu kamu bisa mencobanya satu per satu taq tersebut;
Untuk mencari Taq Imaga dengan cepat kamu bisa menggunakan Shortcut pencarian yaitu dengan menekan CTRL+F.
Demikianlah artikel kali ini tentang Cara Membuat dan Memasang Script Lazy Load Image di Blog. Semoga artikel ini bermanfaat buat teman-teman semuanya!
0 komentar