首页 / 脚本样式 / JavaScript / picLazyLoad 实现图片延时加载（包含背景图片）

/** * picLazyLoad 图片延时加载，包含背景图片 * $（img）.picLazyLoad（{...}） * data-original 预加载图片地址 * alon */;（function（$）{$.fn.imgLazyLoad = function（settings）{var $this = $（this）,_winScrollTop = 0,_winHeight = $（window）.height（）;settings = $.extend（{threshold: 0, // 提前高度加载placeholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",callback:function（）{}}, settings||{}）;// 执行懒加载图片lazyLoadPic（）;// 滚动触发换图$（window）.on（"scroll",function（）{_winScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;lazyLoadPic（）;}）;// 懒加载图片function lazyLoadPic（）{$this.each（function（）{var $self = $（this）;if（$self.is（"img"））{if（$self.attr（"data-original"））{var _offsetTop = $self.offset（）.top;if（（_offsetTop - settings.threshold） <= （_winHeight + _winScrollTop））{$self.attr（"src",$self.attr（"data-original"））;$self.removeAttr（"data-original"）;$self.removeClass（"loadH"）;settings.callback（$self）;}}}else{if（$self.attr（"data-original"））{// 默认占位图片if（$self.css（"background-image"） == "none"）{$self.css（"background-image","url（"+settings.placeholder+"）"）;}var _offsetTop = $self.offset（）.top;if（（_offsetTop - settings.threshold） <= （_winHeight + _winScrollTop））{$self.css（"background-image","url（"+$self.attr（"data-original"）+"）"）;$self.removeAttr（"data-original"）;settings.callback（$self）;}}}}）;}}}）（Zepto）;

$（"img"）.imgLazyLoad（{callback:function（data）{}）