 |
| Optimize image blog |
Biasanya sebuah blog saat di test di google page speed,pastinya para sobat blogger sadar,ternyata banyak gambar atau script ,css yang belum di optimisasi,sehingga mengurangi nilai speed blognya.
Untuk para master blogger,pastinya sudah mengantisipasi masalah optimisasi blog,sehingga tidak akan kaget atau memiliki masalah yang satu ini jika di test blognya di google page speed..
Naah,kali ini saya akan share,cara optimisasi image di blogspot dengan lazy load hasil baca di css-tricks.com,versi manual..
Kalo para master blog punya tips yang lebih keren lagi,silahkan di bagikan ilmunya di comment blog saya,sehingga saya tidak perlu lagi optimize image secara manual lagi..hehe..
Silahkan yang newibie seperti saya ini,bisa gunakan script ini.
<script type='text/javascript'>
//<![CDATA[
/* lazyload.js (c) Lorenzo Giuliani
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*
* expects a list of:
* `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
*/
!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<f;b++)
l[b].currentStyle.f && c.push(l[b]);
a.removeRule(0);
res = c;
}
return res;
}
, addEventListener = function(evt, fn){
window.addEventListener
? this.addEventListener(evt, fn, false)
: (window.attachEvent)
? this.attachEvent('on' + evt, fn)
: this['on' + evt] = fn;
}
, _has = function(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
}
;
function loadImage (el, fn) {
var img = new Image()
, src = el.getAttribute('data-src');
img.onload = function() {
if (!! el.parent)
el.parent.replaceChild(img, el)
else
el.src = src;
fn? fn() : null;
}
img.src = src;
}
function elementInViewport(el) {
var rect = el.getBoundingClientRect()
return (
rect.top >= 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);
//]]>
</script>
//<![CDATA[
/* lazyload.js (c) Lorenzo Giuliani
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*
* expects a list of:
* `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
*/
!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<f;b++)
l[b].currentStyle.f && c.push(l[b]);
a.removeRule(0);
res = c;
}
return res;
}
, addEventListener = function(evt, fn){
window.addEventListener
? this.addEventListener(evt, fn, false)
: (window.attachEvent)
? this.attachEvent('on' + evt, fn)
: this['on' + evt] = fn;
}
, _has = function(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
}
;
function loadImage (el, fn) {
var img = new Image()
, src = el.getAttribute('data-src');
img.onload = function() {
if (!! el.parent)
el.parent.replaceChild(img, el)
else
el.src = src;
fn? fn() : null;
}
img.src = src;
}
function elementInViewport(el) {
var rect = el.getBoundingClientRect()
return (
rect.top >= 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);
//]]>
</script>
Silahkan taruh di body blog </body>
Kemudian mulailah buka menu post halaman htmlnya,kemudian silahkan ganti link berikut.
<a href="https://3.bp.blogspot.com/-image.jpg" width="320" /></a>
menjadi seperti ini..
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">
Ganti semua link gambarnya menjadi seperti itu..kalo blog sudah banyak file image,pasti cape bukan..haha..untung saja saya baru bikin blog,sehingga tidak terlalu repot.
Cape sedikit nggak apalah..yang penting speed blog sobat ada perubahan bukan..hehe..
Setelah semua link gambar di rubah,silahkan test kembali blog anda di google page speed..bagaimana?ada perubahan bukan?
Selamat mencoba..
Link sumber https://css-tricks.com/snippets/javascript/lazy-loading-images/
