Cách chèn hiệu ứng Lazy Load cho blogspot

Lazyload là một Plugin Jquery sử dụng cho việc load hình ảnh trên trang web. Công dụng của nó là các hình ảnh chỉ hiển thị trong tầm mắt bạn nhìn thấy được trên trình duyệt và khi bạn di chuyển thanh cuộn của trình duyệt tới đâu thì hình ảnh khu vực đó mới được nạp và hiển thị, điều này sẽ giúp cải thiện tốc độ tải trang của bạn đi đáng kể khi blog của bạn sử dụng nhiều hình ảnh.

Cách thêm Lazyload vào blogspot

- Để cài đặt, trước tiên vào Blogger >> Mẫu >> Chỉnh sửa HTML

- Copy đoạn code dưới đây dán nó vào trước thẻ </body>[post_ad]

huhu

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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/AVvXsEgpgQXVb5OAB3ZFpgoGhs35Yxx8jYdHzLkKCG-ANEA5nkj6ALKDNpgxtKPImKCe-i1yCtXp-N2pWFZY06eOHtIBRT8392VSQIz_tGk9mrL7Fn5sHGK0RC0h1s5EwvCWlAonAMJfkwpfKCQB/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Lưu mẫu lại. Chúc bạn thành công !

Download Here