AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

picLazyLoad 实现图片延时加载(包含背景图片)

51自学网 http://www.wanshiok.com
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){  })

以上这篇picLazyLoad 实现图片延时加载(包含背景图片)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持wanshiok.com。


picLazyLoad  
上一篇:jQuery的ajax下载blob文件  下一篇:浅谈DOCTYPE对$(window).height()取值的影响