Tặng code stream phim trị giá 500k nhân dịp giáng sinh và năm mới (Áp dụng theme từ 500k) Mua ngay

Hướng dẫn tạo Lazy Load ảnh giúp tăng tốc độ cho blogspot

Hướng dẫn tạo Lazy Load ảnh giúp tăng tốc độ cho blogspot

Cập nhật ngày Bởi
Ying Vn hướng dẫn các bạn cách cài Lazy Load cho blogspot, mục đích là giúp tăng tốc độ tải trang cho blogspot của bạn. Hình ảnh chỉ load khi xuất hiện trên màn hình, còn hình bị khuất phía dưới sẽ không load cùng, khi bạn cuộn trang tới đâu hình ảnh mới load tới đó.
Lazy Load ảnh cho blogspot
Cách cài đặt:

Các bạn copy đoạn code bên dưới dán trước thẻ đóng </body> và lưu lại
<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/AVvXsEiU-1SyBZFXj8VgCa4b8igaVcsJW1m4Ccdw7TWCJ9pfgz1gV1mcPMOjKCxFWpZif6iatjmr0qLzZZ82SLlgwo5QCUErJRJU5k9DkilabqqQ0X0CjSSQoylsyfTcLhWiyZh5XFJxk_-L0hyS/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});

//]]>

</script>
Sau đó các bạn vô trang blogspot của bạn và kiểm tra tốc độ load trang cải thiện đáng kể, tốc độ tải trang cho blogspot nhanh hơn.

Kết luận: Đây cũng là một thủ thuật tối ưu tốc độ tải trang cho blogspot.

Comments

Call
0948713329
Contact Me on Zalo