load ảnh tuần tự bằng jquery cho blogspot

1. Load ảnh tuần tự hay lazyload là gì?

Load ảnh tuần tự (lazyload) là cuộn trang web tới đâu thì ảnh mới hiển thị ra tới đó.
Ví dụ: bài viết của bạn có 30 ảnh tất cả tuy nhiên thay vì load tất cả các ảnh khi truy cập vào bài viết đó thì bạn chỉ load những ảnh nào hiển thị ra thôi, còn những ảnh còn lại mình chỉ load lên khi nào người dùng kéo chuột xuống tới nó.

2. Tác dụng của load ảnh tuần tự là gì?

Load ảnh tuần tự sẽ giúp web của bạn truy cập nhanh hơn vì không phải load tất cả các ảnh có trong bài viết lên khi chưa thật sự cần thiết.
Load ảnh tuần tự giúp bài viết của bạn được chấm điểm cao hơn về tốc độ trên bộ máy tìm kiếm.

3. Làm sao để gắn chức năng load ảnh tuần tự vào blogspot?

Chỉ cần doạn code đơn giản dưới đây được đặt trước </head> là trang blog của bạn đã có chức năng load ảnh tuần tự và mượt mà.

<!-- load ảnh tuần tự -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options)}var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear")}else{if(counter++>settings.failurelimit){return false}}});var temp=$.grep(elements,function(element){return!element.loaded});elements=$(temp)})}this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"))}if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder)}else{$(self).removeAttr("src")}self.loaded=false}else{self.loaded=true}$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))[settings.effect](settings.effectspeed);self.loaded=true}).attr("src",$(self).attr("original"))}});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear")}})}});$(settings.container).trigger(settings.event);return this};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop()}else{var fold=$(settings.container).offset().top+$(settings.container).height()}return fold<=$(element).offset().top-settings.threshold};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft()}else{var fold=$(settings.container).offset().left+$(settings.container).width()}return fold<=$(element).offset().left-settings.threshold};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop()}else{var fold=$(settings.container).offset().top}return fold>=$(element).offset().top+settings.threshold+$(element).height()};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft()}else{var fold=$(settings.container).offset().left}return fold>=$(element).offset().left+settings.threshold+$(element).width()};$.extend($.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);
 //]]></script>
<script type='text/javascript'>
$(function() { $(&quot;img&quot;) .lazyload({ placeholder : &quot;//img1.blogblog.com/img/blank.gif&quot;, effect: &quot;fadeIn&quot; }); });</script>
</b:if>

Lưu ý: để chạy code trên toàn blog thì hãy xóa bỏ <b:if cond='data:blog.pageType == &quot;item&quot;'> và </b:if>