This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Wednesday, 1 November 2017

[Blogger] Tích hợp Lazy Load Image Jquery tăng tốc độ tải trang cho blogspot


Tốc độ tải trang luôn là tiêu chí các webmaster đặt lên hàng đầu. Ảnh là tác nhân có ảnh hưởng rất lớn tới tiêu chí này. Muốn đẹp thì không nhanh mà muốn nhanh thì lại không đẹp !! Vậy có phương án nào vừa có nhiều ảnh mà vừa load trang nhanh không. Lazy Load Image được sinh ra để khắc phục vấn đề trên.

Với blog thông thường, khi bạn truy cập vào trang, tất cả ảnh sẽ được tải cùng 1 lúc nhưng với lazy load, nó sẽ chỉ tải những ảnh nằm trong khung nhìn. những ảnh khác khi bạn lăn chuột xuống sẽ được tải tuần tự.

Chắc chắn khi tích hợp plug in này tốc độ tải trang của bạn sẽ nhanh hơn khi chưa tích hợp (trong trường hợp blog có nhiều ảnh).

Giới thiệu sơ sơ cũng kha khá rồi, giờ bắt đầu thủ thuật thôi. Thủ thuật rất đơn giản chỉ có 1 đoạn script nên bạn có thể dễ dàng tích hợp hoặc gỡ ra tùy thích

➦ Đăng nhập vào blogger

➦ Chọn chế độ chỉnh sửa HTML

➦ Thêm thư viện Jquery nếu như template của bạn chưa có

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>

Hoặc

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>

➦ Dán đoạn mã sau trước thẻ đóng </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
(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(){$(".post img").lazyload({placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",effect:"fadeIn",threshold:"0"})})
//]]></script>
</b:if> 

➦ Lưu mẫu sau đó vào blog của bạn để kiểm tra (với bài đăng nhiều ảnh nhé, lẻ tẻ vài tấm sẽ không thấy được sự khác biệt)

➤ Mở rộng bạn có thể giới hạn khi nào đoạn js trên được thực thi bằng việc thay đổi thẻ <b:if>. Tham khảo bài viết Thẻ điều kiện b:if đầy đủ cho blogspot để biết thêm

Chúc bạn thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js