图片懒加载（图片出现在可视区域再加载）
兼容性：兼容目前流行的全部浏览器，包括：兼容到IE6）
使用方法：
-
引入相应的js文件
<script src="js/lazy.js"></script> -
初始化
Lazy.init(1000);
可以传入延时时间。默认是500ms
注意：
<img src="img/load.gif" data-lazy="img/2.jpg">
src 属性放预加载的图片，data-lazy放实际展示的图片
githut：https://github.com/chenjinxinlove/lazy
/**
* 兼容ie678不支持bind(）办法
* */
if (!function() {}.bind) {
Function.prototype.bind = function(context) {
var self = this
, args = Array.prototype.slice.call(arguments);
return function() {
return self.apply(context, args.slice(1));
}
};
}
(function () {
var Lazy = function () {
};
var _imgs = [],
_num = 0;
/**
* 得到元素相当于窗口的高度
* @param _e 出入元素
* @returns {_number} 返回高度
*/
Lazy.prototype._getEleViewHeight = function (_e) {
if(_e){
var _top = _e.offsetTop,
_c = _e.offsetParent;
while (_c !== null){
_top += _c.offsetTop;
_c = _c.offsetParent;
}
if( typeof window.pageYOffset !== 'undefined'){
return _top - window.pageYOffset;
}
else if(typeof document.compatMode !== 'undefined' && document.compatMode !== "BackCopt"){
return _top - document.documentElement.scrollTop;
}
else{
return _top - document.body.scrollTop;
}
}
};
/**
* 得到浏览内窗口高度
* @returns {number}
* @private
*/
Lazy.prototype._getViewHeight = function () {
var _viewHeight = 0;
if( typeof window.innerHeight !== 'undefined' ){
_viewHeight = window.innerHeight;
}
else if(typeof document.compatMode !== 'undefined' && document.compatMode !== "BackCompt"){
_viewHeight = document.documentElement.clientHeight;
}
else{
_viewHeight = document.body.clientHeight;
}
return _viewHeight;
};
Lazy.prototype._getImg = function () {
var _i = document.getElementsByTagName("img");
for(var i = 0, len = _i.length; i < len; i++){
if(typeof (_i[i].getAttribute("data-lazy"))){
_imgs.push(_i[i]);
_num++;
}
}
};
/**
* 导入图片
* @private
*/
Lazy.prototype._loadImg = function () {
if(!_num)return;
var _viewHeihgt = this._getViewHeight();
for(var i = 0, len = _imgs.length; i < len; i++){
var _imgEle = _imgs[i];
if(this._getEleViewHeight(_imgEle) < _viewHeihgt){
_imgEle.src =_imgEle.getAttribute("data-lazy");
delete _imgs[i];
_num--;
}
}
};
/**
* 初始化，可以设置延时
*/
Lazy.prototype.init = function (time) {
this._getImg();
var _time = time || 500;
window.onscroll = window.onload = function () {
setTimeout(function () {
this._loadImg();
}.bind(this),_time);
}.bind(this);
}
window.Lazy = new Lazy();
})();