Cara Mudah Mempercepat Loading Gambar Blog – Ada beberapa penyebab loading blog menjadi lambat. Salah satunya adalah gambar atau foto yang berukuran besar di dalam blog. Kecepatan loading blog sangat berpengaruh, baik untuk SEo maupun kenyamanan pembaca blog.
Mempercepat Loading Gambar Blog . Disini kita akan mengatasi masalah tersebut agar loading gambar lebih cepat. Dengan menggunakan Kode script Lazy Load Image Plug-in untuk meningkatkan kinerja loading gambar blog. Script Lazy Load Image ini dapat meningkatkan kinerja gambar postingan blog, thumbnail, dan konten iframe.
baca juga: Seberapa cepatkah loading loading blog anda ?
Cara Mudah Mempercepat Loading Gambar Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode </head>
4. Taruh kode berikut ini di atasnya.
<script type='text/javascript'>
//<;
self.loaded = true;
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
if (settings.load) {
var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.data(settings.data_attribute));
}
});
/* When wanted event is triggered load original image */
/* by triggering appear. */
if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function(event) {
if (!self.loaded) {
$self.trigger("appear");
}
});
}
});
/* Check if something appears when window is resized. */
$window.bind("resize", function(event) {
update();
});
/* With IOS5 force loading images when navigating with back button. */
/* Non optimal workaround. */
if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
$window.bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
elements.each(function() {
$(this).trigger("appear");
});
}
});
}
/* Force initial check if images should appear. */
$(window).load(function() {
update();
});
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.height() + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
$.inviewport = function(element, settings) {
return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};
/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() or */
/* $("img").filter(":below-the-fold").something() which is faster */
$.extend($.expr[':'], {
"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },
/* Maintain BC for couple of versions. */
"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },
"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
});
//]]>
</script>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJhcImuGSmeqOY94jPQnObgNgNVoCAI2-16cinBMIe1_20bfihiovKp1Qzr_9evp-h1wC8Tzt_dycQEB3RjYpMabRa-9Sz0q5PrW6hKqHjbz_B1GqHzwjqAwGZHGeQ_Q4N7Y9yiliZBo/s1600/grey.gif",threshold : 200});
});
</script>
5. Simpan template jika sudah selesai.
Terima kasih sahabat blogging sudah meluangkan waktu untuk membaca artikel Cara Mudah Mempercepat Loading Gambar Blog semoga bermanfaat. Sebelum menutup halaman ini alangkah baiknya sahabat blogging lihat-lihat lagi artikel lainnya.
EmoticonEmoticon