Thêm hiệu ứng lazyload ảnh vào blogspot

Xin chào các bạn. Hôm nay mình muốn giới thiệu tới các bạn thủ thuật làm thế nào để tạo hiệu ứng Lazy Load cho blogspot . Nếu blogspot của b...

Bài viết liên quan:

Xin chào các bạn. Hôm nay mình muốn giới thiệu tới các bạn thủ thuật làm thế nào để tạo hiệu ứng Lazy Load cho blogspot. Nếu blogspot của bạn quá "cồng kềnh" với trang chủ hay trong mỗi bài viết thì thủ thuật này sẽ cứu được blog của bạn trong mắt khách hàng và các công cụ tìm kiếm đấy. Ngay bây giờ hãy cùng Star Tuấn Blog tạo hiệu ứng Lazy Load cho blog của bạn nhé. Cũng khá đơn giản thôi !

Demo

1. Hãy 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ẻ </head>

<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/AVvXsEi1jrQLHU-Tz4re5tBWlkaME1QdpzpFBNg9RatMZFg63zcfkYhxtL8asNe9XSKA0c8snqLe6ldx3-aIFe6TAxnY2afd8oIHFNoR24qNiMj6Ilk-iIROir0cphsKa7_pSnUHxG7Dec7zjfo/s1600/startuan.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>

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

Hãy để lại comment nếu như bạn có bất kỳ khó khăn hay thắc mắc nào khi làm thủ thuật này với blog của bạn nhé. Nếu bạn thấy các bài viết trên Star Tuấn Blog hay và có giá trị bạn hãy like và subcribe email để nhận tin tức mới nhất từ Star Tuấn Blog nha bạn. Cảm ơn các bạn rất nhiều !