javascript瀑布流式图片懒加载实例解析与优化

之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。 这篇文章主要就是结合上篇《javascript瀑布流式图片懒加载实例》再来看看图片“懒加载”的一些知识。

图片“懒加载”的主旨： 按照需要加载图片，也就是说需要显示的时候再加载图片显示，减少一次性加载的网络带宽开销。

先来看一段代码：

rush:js;"> var conf = { 'loadfirst': true,'loadimg': true };

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

这里我主要是想实现，用户配置和默认配置的合并，这样写代码并不是很优雅，现在使用$.extend来做优化，代码如下：

rush:js;"> _this.setting = { "mobileHeight": 0,//扩展屏幕的高度，使第一屏加载个数可配置 "loadNum": 1 //滚动时，当前节点之后加载个数 };

$.extend(_this.setting,_this.getSetting());

这里重点介绍下，我新添加的两个参数mobileHeight,loadNum

mobileHeight 默认客户端的高度，值越大，首屏加载的图片越多;

loadNum 如果当前节点出现在屏幕上以后，可以一次性加载当前节点之后的若干个节点，可以跳高图片的加载速度;

之前我的代码是这样子写的：

rush:js;"> _this.loadFirstScreen = function() { if (conf.loadfirst) { lazyNode.each(function(i) { currentNodetop = $(this).offset().top; //这里的800就是上面提到的mobileHeight if (currentNodetop < mobileHeight + 800) { _this.replaceImgSrc($(this)); } }); } };

_this.loadImg = function() {
if (conf.loadimg) {
$(window).on('scroll',function() {
var imgLazyList = $('[node-type=imglazy]',node);
//这里的5就是上面提到的loadNum
for (var i = 0; i < 5; i++) {
_this.replaceImgSrc(imgLazyList.eq(i));
}
});
}
};

按照可配置的想法来优化我现在的代码就是下面的这个样子的：

<div class="jb51code">
<pre class="brush:js;">
loadFirstSrceen: function() {
// 加载首屏
var _this = this;
var currentNodetop;
var imgNodeList = _this.imgNode;
$(imgNodeList).each(function() {
currentNodetop = $(this).offset().top;
if (currentNodetop < _this.mobileHeight() + _this.setting.mobileHeight) {
_this.replaceImgSrc($(this));
}
});
},scrollLoadImg: function() {
//滚动的时候加载图片
var _this = this;
var currentNodetop;
var scrollTop = $('body').scrollTop();
var imgLazyList = $('[node-type=imglazy]');

$(imgLazyList).each(function() {
currentNodetop = $(this).offset().top;
if (currentNodetop - scrollTop < _this.mobileHeight()) {
//加载当前节点后的规定个数节点
for (var i = 0,len = _this.setting.loadNum; i < len; i++) {
_this.replaceImgSrc($(imgLazyList).eq(i));
}
return false;
}
});
}