javascript瀑布流式图片懒加载实例

前端之家收集整理的这篇文章主要介绍了javascript瀑布流式图片懒加载实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近项目使用到了“懒加载”,现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。

代码如下:

图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]',node),mobileHeight,lazyOffSetHeight,tempHeight,currentNodeTop,imgObject,imgDataSrc,localUrl;

localUrl = location.href;
// 获取当前浏览器可视区域的高度
mobileHeight = $(window).height();

return function(co) {

var conf = {
'loadfirst': true,'loadimg': true
};

for (var item in conf) {
if (item in co) {
conf[item] = co[item];
}
}

var that = {};
var _this = {};
/**

  • [replaceImgSrc 动态替换节点中的src]
  • @param {[type]} tempObject [description]
  • @return {[type]} [description]
    */
    _this.replaceImgSrc = function(tempObject) {
    var srcValue;

$.each(tempObject,function(i,item) {
imgObject = $(item).find('img[data-lazysrc]');
imgObject.each(function(i) {
imgDataSrc = $(this).attr('data-lazysrc');
srcValue = $(this).attr('src');
if (srcValue == '#') {
if (imgDataSrc) {
$(this).attr('src',imgDataSrc);
$(this).removeAttr('data-lazysrc');
}
}
});
});
};

/**

  • 首屏判断屏幕上是否出现imglazy节点,有的话就加载图片
  • @param {[type]} i) { currentNodeTop [description]
  • @return {[type]} [description]
    */
    _this.loadFirstScreen = function() {
    if (conf.loadfirst) {
    lazyNode.each(function(i) {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop < mobileHeight + 800) {
    _this.replaceImgSrc($(this));
    }
    });
    }
    };

//当加载过首屏以后按照队列加载图片
_this.loadImg = function() {
if (conf.loadimg) {
$(window).on('scroll',function() {
var imgLazyList = $('[node-type=imglazy]',node);
for (var i = 0; i < 5; i++) {
_this.replaceImgSrc(imgLazyList.eq(i));
}
});
}
};

that = {
replaceImgSrc: _this.replaceImgSrc(),mobileHeight: mobileHeight,objIsEmpty: function(obj) {
for (var item in obj) {
return false;
}
return true;
},destory: function() {
if (_this) {
$.each(_this,item) {
if (item && item.destory) {
item.destory();
}
});
_this = null;
}
$(window).off('scroll');
}
};
return that;
};
}

希望本文对大家学习javascript图片懒加载有所帮助。

猜你在找的JavaScript相关文章