Banner 1

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 chèn hiệu ứng Lazy Load cho blogspot
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]
<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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Lưu mẫu lại. Chúc bạn thành công !
Cách chèn hiệu ứng Lazy Load cho blogspot Cách chèn hiệu ứng Lazy Load cho blogspot Xét bởi Trường Quang on 8/15/2016 Xếp hạng: 5

Không có nhận xét nào:

# HƯỚNG DẪN NHẬN XÉT
Chú ý: Bạn phải đăng nhập tài khoản Google mới có thể bình luận.
_Cấm spam link dưới mọi hình thức
_Các liên kết sử dụng cú pháp: <a href='#'>Text hiển thị</a>
_Thay dấu # thành đường dẫn mà bạn muốn link tới.