Lazy Load tăng tốc tải website/blogger nhanh gấp 5 lần

VIEW:

BÀI LIÊN QUAN

Tăng tốc độ tải trang gấp 5 lần nhờ công cụ Lazy Load. Lazy Load là một công nghệ tối ưu. Lazy loading là kỹ thuật rất quan trọng trong lập trình hướng đối tượng. Vì nhờ có nó ta có thể tiết kiệm được rất nhiều thao tác gọi nạp file khi sử dụng. Bản thân lazy loading sử dụng magic method. Để triệu gọi dữ liệu. Cụ thể là phương thức autoload.

Bắt đầu thôi!!

Bước 1:

Vào Blogger dưới quyền admin, vào mẫu chỉnh sửa HTML

Bước 2:

Tìm tới đoạn mã </body> thêm đoạn code phía dưới vào trên thẻ </body> lưu mãu để thưởng thức thành quả.

thangbme.com

<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/AVvXsEj5_PzzCK8FvkVQ7-l6QtWBdziEzFx72Sv0yeUVsmmwpeECfP0WZyGIu-mZVXe7lbaLC9olCE7DX3MlDML21TdDO1lF0H9dXD6F3wF0PRBEUrLl9_GEEa2CoQLaIGHYjMKcsu43J9TRT1U/s60/wahyupratama.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>  

Chúc các bạn thành công.