Chào mừng đến với Diễn Đàn Tin Học VN! Hãy chia sẽ những gì bạn biết, và đưa ra thắc mắc của bạn để được giải đáp.
Load Ảnh Tuần Tự Bằng Jquery Cho Blogspot
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à.
Lưu ý: để chạy code trên toàn blog thì hãy xóa bỏ <b:if cond='data:blog.pageType == "item"'> và </b:if>
Nguồn: https://phungnghidinh.blogspot.com/2018/07/load-anh-tuan-tu-bang-jquery-cho-blogspot.html
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 == "item"'>[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() { $("img") .lazyload({ placeholder : "//img1.blogblog.com/img/blank.gif", effect: "fadeIn" }); });</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 == "item"'> và </b:if>
Nguồn: https://phungnghidinh.blogspot.com/2018/07/load-anh-tuan-tu-bang-jquery-cho-blogspot.html
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|