Cách tạo lazy load cho các hình ảnh và qc adsense trên blogger

Dù đã thử qua rất nhiều code khác nhau nhưng dường như hiệu ứng lazy load mà mình đang tìm  hiểu vẫn không hoạt động một cách hiệu quả được. Tình cờ mình phát hiện ra đoạn code khá hay về hiệu ứng tải chậm hình ảnh cho blogger cực hay mà nếu các bạn áp dụng lên trang log của mình sẽ làm tăng độ mượt mà lên hơn rất nhiều. Không những thế nếu trang  bạn co cài thêm quảng cáo adsense nữa thì cũng chẳng sao bởi trong đoạn code này có luôn hiệu ứng atri chậm cho loại quảng cáo này luôn nhé

Hiệu ứng Lazy load Image cho blogger là một hiệu ứng giúp cho blog tải trang nhanh hơn so với bình thường khi mà các hình ảnh được hiện tuần tự, lúc kéo chuột đến đâu thì hình ảnh hiện ra đến đó. Đồng nghĩa với việc các hình ảnh nằm sâu xuống phía cuối bài sẽ hiện ra sau cùng khi bạn kéo đến đọc. Điều này sẽ tránh hiện tượng các hình ảnh dù không xuất hiện trên màn hình cũng được tải xuống khiến bài đăng ì ạch không được mượt mà

Cách làm rất đơn giản chứ không phức tạp như bạn nghĩ đâu nhé với chỉ một thao tác duy nhất để cài đoạn code vào theme blog

1.Cách thực hiện

Các bạn chép hết đoạn code ngay ở bên dưới và chèn trước thẻ đóng </body> sau đó chỉ việc lưu lại xong thôi nhà

<script type='text/javascript'>
//<![CDATA[
// AdSense by bietko.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTUxQGLcQRfQR2QvEemZ8BgiC7g7pESdtB7-Z_fmYzD5_MoigASxWM8Ku9lZ0DqdxbD2rdJSBeUlT15hgWsHz_s6hyPbKHaxb5ZvFvS4gEC278OOoeitVQ5QJrROIJ55LAQc_KHym8-dg/s1600/loadingku.gif",effect:"fadeIn",threshold:"0"})});
//]]>
</script>

Mẫu file gif hình ảnh chờ tải trang như đoạn code màu xanh bên trên có thể thay bằng mẫu khác nếu các bạn thấy đẹp hơn. Riêng mình vẫn để vậy bởi chưa tìm thấy biểu tượng chờ đẹp hơn

Demo hiệu ứng chờ tải trang cho blogger

Hoặc các bạn cũng có thể thử icon chờ load khá thú vị như bên dưới xem sao