Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn)
Nếu bạn đang dùng Blogspot mà chưa biết đến Lazy Load thì đây là bài viết dành cho bạn. Lazy Load là hình thức load chậm cho hình ảnh và Google Adsense. Khi bạn chưa sử dụng đoạn code này đồng nghĩa khi khách hàng vào website blogspot của bạn tất cả hình ảnh hay quảng cáo từ trên xuống dưới sẽ đồng loạt load lên 1 lần, làm blog của bạn rất lâu để tải hết trang.
 |
| Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn) |
Chính vì vậy khi sử dụng đoạn code lazy load blogspot và Google Adsense dưới đây mình chia sẻ cho các bạn thì blog của bạn sẽ tải dần dần. Khi vào website thì blog sẽ tải trang những gì mà họ nhìn thấy. Và tiếp tục tải nếu khách hàng cuộn xuống bên dưới.
Cuộn trang đến đâu Lazy Load sẽ tải hỉnh ảnh và quảng cáo đến đó cho nên mình mới gọi đây là hình thức tải chậm giúp Blogspot của bạn sẽ tải nhanh hơn trông thấy.
Các bạn lưu ý rằng Lazy Load sẽ làm blogspot của bạn tải nhanh hơn chứ không làm tăng điểm PageSpeed Insights. PageSpeed Insights nhiều khi nó chỉ là một cái gì đó Ảo diệu thôi. Mình nói vậy chắc các bạn hiểu chứ.
Cách thêm Lazy Load hình ảnh và Google Adsense vào Blogspot
#Bước 1 : Chủ đề > Chỉnh sửa HTML > Tìm đến thẻ đóng </body> hoặc /body
#Bước 2 : Thêm đoạn code sau bên trên thẻ vừa tìm được
<script type=’text/javascript’>
//<![CDATA[
// AdSense by Bloghong.com
var lazyadsense=!1;window.addEventListener(“scroll”,function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement(“script”);e.type=”text/javascript”,e.async=!0,e.src=”https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/arlinablock.js”;var a=document.getElementsByTagName(“script”)[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
// Lazy Load bloghong.com
(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://3.bp.blogspot.com/-xtM_7x0_cU4/XIok1BisovI/AAAAAAAAPUc/QGJpBJZ3QBM_Spkd9r3-SMurEUbRI1pOQCLcBGAs/s1600/loadingku.gif”,effect:”fadeIn”,threshold:”0″})});
//]]>
</script>
#Bước 3 : Lưu mẫu lại và thử tải lại trang chủ để xem thành quả nhé.
Chúc các bạn có sự trả nghiệm blogspot tuyệt vời.
Hãy tham gia cộng đồng Blogspot trên Facebook để cho đi và nhận lại những điều ý nghĩa hơn
Thắc mắc để lại comments nha anh em.
Cảm ơn chia sẽ hữu ích của anh nhé
Tuyệt vời ông mặt chời luô
tắt snow đi bác
Ok cảm ơn bạn đã góp ý nhé.
cả cái đếm ngược tết nữa bác ơi =))
:))