1 /**
2 * picLazyLoad 圖片延時加載，包含背景圖片
3 * $(img).picLazyLoad({...})
4 * data-original 預加載圖片地址
5 * alon
6 */
7 ;(function($){
8 $.fn.imgLazyLoad = function(settings){
9 var $this = $(this),
10 _winScrollTop = 0,
11 _winHeight = $(window).height();
12 settings = $.extend({
13 threshold: 0, // 提前高度加載
14 placeholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
15 callback:function(){}
16 }, settings||{});
17 // 執行懶加載圖片
18 lazyLoadPic();
19 // 滾動觸發換圖
20 $(window).on('scroll',function(){
21 _winScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
22 lazyLoadPic();
23 });
24 // 懶加載圖片
25 function lazyLoadPic(){
26 $this.each(function(){
27 var $self = $(this);
28 if($self.is('img')){
29 if($self.attr('data-original')){
30 var _offsetTop = $self.offset().top;
31 if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
32 $self.attr('src',$self.attr('data-original'));
33 $self.removeAttr('data-original');
34 $self.removeClass('loadH');
35 settings.callback($self);
36 }
37 }
38 }else{
39 if($self.attr('data-original')){// 默認占位圖片
40 if($self.css('background-image') == 'none'){
41 $self.css('background-image','url('+settings.placeholder+')');
42 }
43 var _offsetTop = $self.offset().top;
44 if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
45 $self.css('background-image','url('+$self.attr('data-original')+')');
46 $self.removeAttr('data-original');
47 settings.callback($self);
48 }
49 }
50 }
51 });
52 }
53 }
54 })(Zepto);
調用
1 $('img').imgLazyLoad({callback:function(data){
2
3 })
