Pada kesempatan kali ini, saya akan membagikan trik mempercepat loading blog dengan menambahkan script JQuery Lazy Load pengaruh animasi loading. Berikut langkah-langkah penerapanya pada template blog anda:
Langkah #1
Login blogger.com dengan akun gmail anda
Langkah #2
Klik sajian Template - Edit HTML
Langkah #3
Copy dan paste script lazy load di bawah ini, sempurna di atas arahan </body>
<script type='text/javascript'>
//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9pCeXB5s3sRncdKaVr9TdL8IfdREalO5V7RIjIidwgHCZQxJrR_P8KnSvHZnBSFFcz7FSRezx13CHOQvdllLr34t370xGqHulN2SogQ9D2YGevSHwYHJ47f3xTaDMvVYcnGf5GGf4vI/s1600/image-loader.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9pCeXB5s3sRncdKaVr9TdL8IfdREalO5V7RIjIidwgHCZQxJrR_P8KnSvHZnBSFFcz7FSRezx13CHOQvdllLr34t370xGqHulN2SogQ9D2YGevSHwYHJ47f3xTaDMvVYcnGf5GGf4vI/s1600/image-loader.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Langkah #4
Simpan template, dan silahkan anda lihat hasilnya.
Demikian tips Percepat Loading Blog dengan Script Lazy Load Animasi, semoga bermanfaat.
0 Response to "Percepat Loading Blog Dengan Script Lazy Load Animasi"
Post a Comment