javascript瀑布流式圖片懶加載實(shí)例
最近項(xiàng)目使用到了“懶加載”,現(xiàn)在更新一般,因?yàn)槠綍r(shí)主要使移動(dòng)端的開(kāi)發(fā)所以庫(kù)文件使用的是zepto.js 。當(dāng)然也可以和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;
// 獲取當(dāng)前瀏覽器可視區(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 動(dòng)態(tài)替換節(jié)點(diǎn)中的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é)點(diǎn),有的話就加載圖片
* @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));
}
});
}
};
//當(dāng)加載過(guò)首屏以后按照隊(duì)列加載圖片
_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;
};
}
希望本文對(duì)大家學(xué)習(xí)javascript圖片懶加載有所幫助。
- 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í)例解析與優(yōu)化
- javascript實(shí)現(xiàn)瀑布流加載圖片原理
- js實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)瀑布流
相關(guān)文章
html中通過(guò)JS獲取JSON數(shù)據(jù)并加載的方法
本篇內(nèi)容主要給大家講了如何通過(guò)javascript解析JSON并得到數(shù)據(jù)后添加到HTML中的方法,需要的朋友參考下。2017-11-11
在Vue.js中使用Mock數(shù)據(jù)的詳細(xì)教程與技巧
這篇文章主要介紹了在Vue.js項(xiàng)目中設(shè)置和使用Mock數(shù)據(jù)的方法,Mock數(shù)據(jù)在前端開(kāi)發(fā)、單元測(cè)試和調(diào)試中非常有用,可以通過(guò)使用axios進(jìn)行數(shù)據(jù)請(qǐng)求,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
Js實(shí)現(xiàn)京東無(wú)延遲菜單效果實(shí)例(demo)
本篇文章主要介紹了Js實(shí)現(xiàn)京東無(wú)延遲菜單效果實(shí)例(demo) ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三):鏈表
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(三):鏈表,本文分別講解了單鏈表與雙鏈表以及增加節(jié)和刪除節(jié)的代碼實(shí)例,需要的朋友可以參考下2015-06-06
JSON.parse處理非標(biāo)準(zhǔn)Json數(shù)據(jù)出錯(cuò)的解決
這篇文章主要介紹了JSON.parse處理非標(biāo)準(zhǔn)Json數(shù)據(jù)出錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
web性能優(yōu)化之javascript性能調(diào)優(yōu)
本文詳細(xì)介紹Web 開(kāi)發(fā)中關(guān)于性能方面需要注意的一些小細(xì)節(jié),從 JavaScript 本身著手,介紹了 JavaScript 中需要避免的一些函數(shù)的使用和編程規(guī)則,比如 eval 的弊端,function scope chain 以及 String 的用法等等2012-12-12
JavaScript取得gridview中獲取checkbox選中的值
這篇文章主要介紹了 js取得gridview中獲取checkbox選中的值,本文給大家分享兩段代碼片段,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-07-07

