javascript瀑布流式圖片懶加載實(shí)例
最近項(xiàng)目使用到了“懶加載”,現(xiàn)在更新一般,因?yàn)槠綍r(shí)主要使移動端的開發(fā)所以庫文件使用的是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 動態(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)加載過首屏以后按照隊(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; }; }
希望本文對大家學(xué)習(xí)javascript圖片懶加載有所幫助。
- js圖片加載效果實(shí)例代碼(延遲加載+瀑布流加載)
- 利用JS實(shí)現(xiàn)簡單的瀑布流加載圖片效果
- JavaScript實(shí)現(xiàn)瀑布流以及加載效果
- javascript實(shí)現(xiàn)瀑布流動態(tài)加載圖片原理
- javascript實(shí)現(xiàn)仿百度圖片的瀑布流加載效果
- JavaScript實(shí)現(xiàn)圖片自動加載的瀑布流效果
- 解析javascript瀑布流原理實(shí)現(xiàn)圖片滾動加載
- javascript瀑布流式圖片懶加載實(shí)例解析與優(yōu)化
- javascript實(shí)現(xiàn)瀑布流加載圖片原理
- js實(shí)現(xiàn)動態(tài)加載數(shù)據(jù)瀑布流
相關(guān)文章
JavaScript/Js腳本處理html元素的自定義屬性解析(親測兼容Firefox與IE)
這篇文章主要是對JavaScript/Js腳本處理html元素的自定義屬性解析(親測兼容Firefox與IE)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08JavaScript實(shí)現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時(shí)回調(diào)地獄的問題,大家應(yīng)該也不陌生了,今天來學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過程吧2023-04-04重寫document.write實(shí)現(xiàn)無阻塞加載js廣告(補(bǔ)充)
這篇文章主要介紹了重寫document.write實(shí)現(xiàn)無阻塞加載js廣告,需要的朋友可以參考下2014-12-12獲取JS中網(wǎng)頁各種高寬與位置的方法總結(jié)
本文詳細(xì)羅列了如何在javascript獲取網(wǎng)頁各種高寬及位置,內(nèi)容比較全面,有需要的可以參考一下。2016-07-07JavaScript優(yōu)化專題之Loading and Execution加載和運(yùn)行
這篇文章主要介紹了JavaScript優(yōu)化專題中Loading and Execution加載和運(yùn)行的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01CocosCreator經(jīng)典入門項(xiàng)目之flappybird
這篇文章主要介紹了CocosCreator經(jīng)典入門項(xiàng)目之flappybird,詳細(xì)說明了制作的每個步驟,還有詳盡的代碼,對CocosCreator感興趣的同學(xué),一定要看一下2021-04-04