Share
View previous topicGo downView next topic
avatar
Admin
Tổng số bài gửi : 136
Join date : 2010-07-30
View user profilehttp://diendantinhocvn.forumvi.com

Load Ảnh Tuần Tự Bằng Jquery Cho Blogspot

on 10/07/18, 12:32 pm
Load ảnh tuần tự (lazyload) là cuộn trang web tới đâu thì ảnh mới hiển thị ra tới đó, để tránh tình trạng web của bạn chậm chạp do load tất cả các ảnh có trên trang ra.
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à. 

Code:
<!-- load ảnh tuần tự -->[i][/i]
<b:if cond='data:blog.pageType == &quot;item&quot;'>[i][/i]
<script type='text/javascript'>[i][/i]
//<![CDATA[[i][/i]
(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);[i][/i]
 //]]></script>[i][/i]
<script type='text/javascript'>[i][/i]
$(function() { $(&quot;img&quot;) .lazyload({ placeholder : &quot;//img1.blogblog.com/img/blank.gif&quot;, effect: &quot;fadeIn&quot; }); });</script>[i][/i]
</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>


Nguồn: https://phungnghidinh.blogspot.com/2018/07/load-anh-tuan-tu-bang-jquery-cho-blogspot.html
View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum