之前寫過一版圖片“懶加載”的文章，剛好周末在整理文件的時候，大概又看了一遍之前寫的代碼發現有很多可以優化的地方。
這篇文章主要就是結合上篇《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瀑布流式圖片懶加載有了更深的認識，學會優化方法，謝謝大家的閱讀。
新聞熱點
疑難解答
