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