Percepat Loading Blog Dengan Lazy Loading Image | Script Lazy Loading

Percepat Loading Blog Dengan Lazy Loading Image | Script Lazy Loading

Mempercepat loading image atau gambar dapat memberikan kecepatan loding yang signifikan pada website atau blog. Dengan adanya prioritas index webmaster untuk web yang memiliki beban loding lebih kecil membuat para blogger menggunakan ini sebagai salah satu jalan untuk dapat mempercepat loading website mereka. Dan pada kali ini mari kita coba untuk melakukan percepatan loading blog pribadi kita dengan menggunakan script yang telah diciptakan ini.

Kenapa dengan menggunakan lazy loading dapat membantu mempercepat loading website, khususnya untuk website yang banyak menampilkan gambar sebagai content utamanya. Karena dengan menggunakan lazy loading script, loading pada content jenis gambar baru akan diloading atau dibaca setelah pengguna web anda melakukan scroll turun / melakukan pengguliran konten. Dengan begitu maka akan mengurangi beban loading saat alamat web dibuka. Sebagai contoh anda dapat melihat pada alamat yang satu ini. LIHAT DI SINI

Berikut ini merupakan script yang akan anda butuhkan pada blog anda supaya lazy loading image dapat berjalan dengan baik.

/* lazyload.js (c) Lorenzo Giuliani * MIT License (http://www.opensource.org/licenses/mit-license.html) * * expects a list of: * `` */ !function(window){ var $q = function(q, res){ if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=document , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) ) } var images = new Array() , query = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], function () { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call is not callable under our lovely IE8 for (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(this);​

Kemudian anda juga harus merubah script gambar yang ada pada blog anda dengan notasi script seperti yang saya contohkan berikut ini.

<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">

Demikian kiranya yang dapat sampaikan semoga informasi ini dapat menjadikan anda lebih mengerti cara mempercepat loading blog / website menggunakan script lazy loading. Dan saya ucapkan terimaksih untuk kunjungan anda pada blog saya.

Percepat Loading Blog Dengan Lazy Loading Image | Script Lazy Loading 2017-06-01T12:27:00-07:00 Rating: 4.5 Diposkan Oleh: Kang Icung