图片懒加载的思路是这样的,当页面加载的时候首先加载的是一张默认的占位图,真正需要的图片不先加载,由于占位图一般都是一张,所以只需要一次请求即可。然后当滑动鼠标滚轮或者移动端滑动屏幕的时候,图片出现在可视区域的时候就显示图片。这里涉及到几个要点:
占位图首先使用了图片的src属性
真实图片通过data-*属性存储它
滚动到特定时机的换图方法
/** * picLazyLoad 图片懒加载,适用于img标签和背景图情况 * * @property data-original: <String> 真实图片 url * @property threshold: <Number> 进入可视区域提前加载的高度 * @property placeholder: <String> 用于背景图情况,占位图片 url * @funcition callback(): 回调函数 */ ;(function($){ $.fn.picLazyLoad = function(settings){ var $this = $(this), // 窗口在可视区域外的高度 _winScrollTop = 0, //分辨率高度 _winHeight = window.screen.height; settings = $.extend({ // 图片不进入可视区域内不加载 threshold: 0, // 这里设置普通占位图 placeholder: '/images/placeholder.jpg', 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; // threshold超过0,代表元素未出现在可视区域时就显示 if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){ $self.attr('src',$self.attr('data-original')); $self.removeAttr('data-original'); 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); } } } }); } } })(jQuery);
使用方法很简单,在图片加上lazyload类,src填写占位图URL,data-original填写真实图片URL
<img class="lazyload" src="/images/placeholder.jpg" data-original="/images/realpic.jpg">
然后调用
$('.lazyload').picLazyLoad();