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

之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。
这篇文章主要就是结合上篇《javascript瀑布流式图片懒加载实例》再来看看图片“懒加载”的一些知识。
图片“懒加载”的主旨：
按照需要加载图片，也就是说需要显示的时候再加载图片显示，减少一次性加载的网络带宽开销。
先来看一段代码：

 var conf = { "loadfirst": true, "loadimg": true};for （var item in conf） { if （item in co） {conf.item = co.item; }}

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

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

这里重点介绍下，我新添加的两个参数mobileHeight,loadNum
mobileHeight 默认客户端的高度，值越大，首屏加载的图片越多;
loadNum 如果当前节点出现在屏幕上以后，可以一次性加载当前节点之后的若干个节点，可以跳高图片的加载速度;
之前我的代码是这样子写的：

_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））; }}）; }};

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

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;} }）;}

更重要的一个方面就是按照编写插件的思想来组织现在的代码结构。代码如下：

;（function（$） { var LoadImgLazy = function（imgNode） {var _this = this;_this.imgNode = imgNode;_this.setting = { "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置 "loadNum": 1 //滚动时，当前节点之后加载个数};$.extend（_this.setting, _this.getSetting（））;_this.loadFirstSrceen（）;$（window）.on（"scroll", function（） { _this.scrollLoadImg（）;}）; }; LoadImgLazy.prototype = {mobileHeight: function（） { return $（window）.height（）;},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;} }）;},replaceImgSrc: function（loadImgNode） { //动态替换图片 var srcValue; var imgDataSrc; var _this = this; var imgUrlList = $（loadImgNode）.find（"img[data-lazysrc]"）; if （imgUrlList.length > 0） {imgUrlList.each（function（i） { imgDataSrc = $（this）.attr（"data-lazysrc"）; srcValue = $（this）.attr（"src"）; if （srcValue === "#"） {if （imgDataSrc） { $（this）.attr（"src", imgDataSrc）; $（this）.removeAttr（"data-lazysrc"）;} }}）;//移除已经运行过懒加载节点的node-type 对性能提升$（loadImgNode）.removeAttr（"node-type"）; }},getSetting: function（） { var userSetting = $（"[lazy-setting]"）.attr（"lazy-setting"）; if （userSetting && userSetting ！== ""） {return $.parseJSON（userSetting）; } else {return {}; }},destory: function（） { //销毁方法区 $（window）.off（"scroll"）;} }; LoadImgLazy.init = function（imgNode） {new this（imgNode）; }; window.LoadImgLazy = LoadImgLazy;}）（Zepto）;

通过这篇文章希望大家对javascript瀑布流式图片懒加载有了更深的认识，学会优化方法，谢谢大家的阅读。