Thêm hiệu ứng lazyload ảnh cho Blog

Hiệu ứng LazyLoad  Bước filter_1 vào Blogger.com → Blog của bạn → Teamplate → Edit HTML  rồi copy và dán đoạn code bên dưới của mình v...

thủ thuật blog

Xếp hạng bài viết

Tham khảo các bài viết khác.

Hiệu ứng LazyLoad

 Bước filter_1 vào Blogger.com → Blog của bạn → Teamplate → Edit HTML rồi copy và dán đoạn code bên dưới của mình vào trước thẻ đóng </head>.

<script type='text/javascript'>
//<![CDATA[
// Lazy Load QRViet.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/AVvXsEj_HuHk72yn39yImMw7c1nWniyAUKFghea8A0LPZIu6vc23iq4qNkgiHv_iCkokfztgzHWzL6ylWJ_krPSDQy_PCi0OHJiZamxmeEQ4WfYa0gKK_rjA8dcm-do5PqPMkWUKJ4yPg0rm6g/s1600/qrviet.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script> 

Nếu blog bạn chưa thêm jquery thì thêm đoạn code sau dưới thẻ </head>.

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

Bước filter_2  cuối cùng là lưu lại và tận hưởng thành quả của bạn.

CHIA SẺ CHO BẠN BÈ