javascript瀑布流式圖片懶加載實例
最近項目使用到了“懶加載”,現(xiàn)在更新一般,因為平時主要使移動端的開發(fā)所以庫文件使用的是zepto.js 。當然也可以和jQuery 通用。
代碼如下:
/**
* Created by zhiqiang on 2015/10/14.
* hpuhouzhiqiang@gmail.com
* 圖片的懶加載
**/
function loadImgLazy(node) {
var lazyNode = $('[node-type=imglazy]', node),
mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
imgDataSrc, localUrl;
localUrl = location.href;
// 獲取當前瀏覽器可視區(qū)域的高度
mobileHeight = $(window).height();
return function(co) {
var conf = {
'loadfirst': true,
'loadimg': true
};
for (var item in conf) {
if (item in co) {
conf[item] = co[item];
}
}
var that = {};
var _this = {};
/**
* [replaceImgSrc 動態(tài)替換節(jié)點中的src]
* @param {[type]} tempObject [description]
* @return {[type]} [description]
*/
_this.replaceImgSrc = function(tempObject) {
var srcValue;
$.each(tempObject, function(i, item) {
imgObject = $(item).find('img[data-lazysrc]');
imgObject.each(function(i) {
imgDataSrc = $(this).attr('data-lazysrc');
srcValue = $(this).attr('src');
if (srcValue == '#') {
if (imgDataSrc) {
$(this).attr('src', imgDataSrc);
$(this).removeAttr('data-lazysrc');
}
}
});
});
};
/**
* 首屏判斷屏幕上是否出現(xiàn)imglazy節(jié)點,有的話就加載圖片
* @param {[type]} i) { currentNodeTop [description]
* @return {[type]} [description]
*/
_this.loadFirstScreen = function() {
if (conf.loadfirst) {
lazyNode.each(function(i) {
currentNodeTop = $(this).offset().top;
if (currentNodeTop < mobileHeight + 800) {
_this.replaceImgSrc($(this));
}
});
}
};
//當加載過首屏以后按照隊列加載圖片
_this.loadImg = function() {
if (conf.loadimg) {
$(window).on('scroll', function() {
var imgLazyList = $('[node-type=imglazy]', node);
for (var i = 0; i < 5; i++) {
_this.replaceImgSrc(imgLazyList.eq(i));
}
});
}
};
that = {
replaceImgSrc: _this.replaceImgSrc(),
mobileHeight: mobileHeight,
objIsEmpty: function(obj) {
for (var item in obj) {
return false;
}
return true;
},
destory: function() {
if (_this) {
$.each(_this, function(i, item) {
if (item && item.destory) {
item.destory();
}
});
_this = null;
}
$(window).off('scroll');
}
};
return that;
};
}
希望本文對大家學習javascript圖片懶加載有所幫助。
相關文章
JavaScript/Js腳本處理html元素的自定義屬性解析(親測兼容Firefox與IE)
這篇文章主要是對JavaScript/Js腳本處理html元素的自定義屬性解析(親測兼容Firefox與IE)進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11
JavaScript實現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時回調(diào)地獄的問題,大家應該也不陌生了,今天來學習一下?promise?的實現(xiàn)過程吧2023-04-04
重寫document.write實現(xiàn)無阻塞加載js廣告(補充)
這篇文章主要介紹了重寫document.write實現(xiàn)無阻塞加載js廣告,需要的朋友可以參考下2014-12-12
獲取JS中網(wǎng)頁各種高寬與位置的方法總結(jié)
本文詳細羅列了如何在javascript獲取網(wǎng)頁各種高寬及位置,內(nèi)容比較全面,有需要的可以參考一下。2016-07-07
JavaScript優(yōu)化專題之Loading and Execution加載和運行
這篇文章主要介紹了JavaScript優(yōu)化專題中Loading and Execution加載和運行的相關資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-01-01
CocosCreator經(jīng)典入門項目之flappybird
這篇文章主要介紹了CocosCreator經(jīng)典入門項目之flappybird,詳細說明了制作的每個步驟,還有詳盡的代碼,對CocosCreator感興趣的同學,一定要看一下2021-04-04

