javascript瀑布流式圖片懶加載實例解析與優(yōu)化
之前寫過一版圖片“懶加載”的文章,剛好周末在整理文件的時候,大概又看了一遍之前寫的代碼發(fā)現(xiàn)有很多可以優(yōu)化的地方。
這篇文章主要就是結(jié)合上篇《javascript瀑布流式圖片懶加載實例》再來看看圖片“懶加載”的一些知識。
圖片“懶加載”的主旨:
按照需要加載圖片,也就是說需要顯示的時候再加載圖片顯示,減少一次性加載的網(wǎng)絡(luò)帶寬開銷。
先來看一段代碼:
var conf = { 'loadfirst': true, 'loadimg': true }; for (var item in conf) { if (item in co) { conf.item = co.item; } }
這里我主要是想實現(xiàn),用戶配置和默認配置的合并,這樣寫代碼并不是很優(yōu)雅,現(xiàn)在使用$.extend來做優(yōu)化,代碼如下:
_this.setting = { "mobileHeight": 0, //擴展屏幕的高度,使第一屏加載個數(shù)可配置 "loadNum": 1 //滾動時,當前節(jié)點之后加載個數(shù) }; $.extend(_this.setting, _this.getSetting());
這里重點介紹下,我新添加的兩個參數(shù)mobileHeight,loadNum
mobileHeight 默認客戶端的高度,值越大,首屏加載的圖片越多;
loadNum 如果當前節(jié)點出現(xiàn)在屏幕上以后,可以一次性加載當前節(jié)點之后的若干個節(jié)點,可以跳高圖片的加載速度;
之前我的代碼是這樣子寫的:
_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)); } }); } };
按照可配置的想法來優(yōu)化我現(xiàn)在的代碼就是下面的這個樣子的:
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()) { //加載當前節(jié)點后的規(guī)定個數(shù)節(jié)點 for (var i = 0, len = _this.setting.loadNum; i < len; i++) { _this.replaceImgSrc($(imgLazyList).eq(i)); } return false; } }); }
更重要的一個方面就是按照編寫插件的思想來組織現(xiàn)在的代碼結(jié)構(gòu)。代碼如下:
;(function($) { var LoadImgLazy = function(imgNode) { var _this = this; _this.imgNode = imgNode; _this.setting = { "mobileHeight": 0, //擴展屏幕的高度,使第一屏加載個數(shù)可配置 "loadNum": 1 //滾動時,當前節(jié)點之后加載個數(shù) }; $.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()) { //加載當前節(jié)點后的規(guī)定個數(shù)節(jié)點 for (var i = 0, len = _this.setting.loadNum; i < len; i++) { _this.replaceImgSrc($(imgLazyList).eq(i)); } return false; } }); }, replaceImgSrc: function(loadImgNode) { //動態(tài)替換圖片 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'); } } }); //移除已經(jīng)運行過懶加載節(jié)點的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() { //銷毀方法區(qū) $(window).off('scroll'); } }; LoadImgLazy.init = function(imgNode) { new this(imgNode); }; window.LoadImgLazy = LoadImgLazy; })(Zepto);
通過這篇文章希望大家對javascript瀑布流式圖片懶加載有了更深的認識,學(xué)會優(yōu)化方法,謝謝大家的閱讀。
相關(guān)文章
使用JS前端技術(shù)實現(xiàn)靜態(tài)圖片局部流動效果
本文使用前端開發(fā)技術(shù),結(jié)合?SVG?和?CSS?來實現(xiàn)類似的液化流動效果,包含的知識點主要包括:mask-image?遮罩、feTurbulence?和?feDisplacementMap?濾鏡、filter?屬性、canvas?繪制方法、TimelineMax?動畫及input[type=file]?本地圖片資源加載,需要的朋友可以參考下2022-08-08javascript從定義到執(zhí)行 你不知道的那些事
這篇文章主要介紹了javascript從定義到執(zhí)行,你不知道的那些事,感興趣的小伙伴們可以參考一下2016-01-01元素的內(nèi)聯(lián)事件處理函數(shù)的特殊作用域在各瀏覽器中存在差異
在一個元素的屬性中綁定事件,實際上就創(chuàng)建了一個內(nèi)聯(lián)事件處理函數(shù)(如<h1 onclick="alert(this);"...>...</h1>),內(nèi)聯(lián)事件處理函數(shù)有其特殊的作用域鏈,并且各瀏覽器的實現(xiàn)細節(jié)也有差異。2011-01-01Three.js利用性能插件stats實現(xiàn)性能監(jiān)聽的方法
Three.js 是一款運行在瀏覽器中的 3D 引擎,你可以用它創(chuàng)建各種三維場景,而下面這篇文章主要給大家介紹了關(guān)于Three.js如何利用性能插件stats實現(xiàn)性能監(jiān)聽的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09