摘要:一傳統(tǒng)的懶加載有時(shí)一個(gè)頁面中有多個(gè)圖片或視頻要展示如果全部將資源加載顯示會導(dǎo)致頁面暫時(shí)空白用戶體驗(yàn)很不好要改變這種體驗(yàn)的一種思路是先用一個(gè)占位圖片顯示然后在可視窗口展示的內(nèi)容提前加載保證用戶看到的是已經(jīng)加載好的圖片等其他占用空間較大的資源例
一.傳統(tǒng)的懶加載
有時(shí)一個(gè)頁面中有多個(gè)圖片或視頻要展示,如果全部將資源加載顯示,會導(dǎo)致頁面暫時(shí)空白,用戶體驗(yàn)很不好,要改變這種體驗(yàn)的一種思路是先用一個(gè)占位圖片顯示,然后在可視窗口展示的內(nèi)容提前加載,保證用戶看到的是已經(jīng)加載好的圖片等其他占用空間較大的資源.
例如:
//css代碼: div image[alt^="picture"] { width: 100px; height: 100px; background: silver; } .img { height: 200px; width: 400px; } //html代碼//js代碼 var imgArr = document.getElementsByClassName("img"); var imgHeight = imgArr[0].style.height; var clientHeight = document.documentElement.clientHeight;//獲取網(wǎng)頁可見區(qū)域高度 window.onscroll = function() { var scrollTop = document.documentElement.scrollTop;//網(wǎng)頁垂直方向滾動的高度 for (let i = 0; i < imgArr.length; i++) { var offset = imgArr[i].offsetTop;//獲取當(dāng)前對象到其上級層頂部的距離 var topT = scrollTop - ("200" + offset); var topB = scrollTop + clientHeight - offset; if (topT < 0 && topB > 0) { imgArr[i].src = imgArr[i].getAttribute("data-src"); } else { imgArr[i].src = "./time.gif"; } } }
頁面剛開始如下圖所示,
當(dāng)滾動鼠標(biāo)時(shí),圖片陸續(xù)顯示
微信小程序是監(jiān)聽目標(biāo)節(jié)點(diǎn)和參照區(qū)域相交的狀態(tài)來實(shí)現(xiàn)懶加載
//wxml代碼://js代碼: Page({ data: { imgArr: [{ title: "picture1", src: "../../images/timg.gif", realSrc: "../../images/1.jpg" }, { title: "picture2", src: "../../images/timg.gif", realSrc: "../../images/2.jpg" }, { title: "picture3", src: "../../images/timg.gif", realSrc: "../../images/3.jpg" }, { title: "picture4", src: "../../images/timg.gif", realSrc: "../../images/4.jpg" } ] }, onLoad(options) { var _self = this; var obs = wx.createIntersectionObserver(this, { observeAll: true }); obs.relativeToViewport({ bottom: 100 }).observe(".img", function(res) { _self.data.imgArr.forEach(function(item) { if (res.dataset.src == item.realSrc) { if (res.intersectionRatio > 0) { item.src = res.dataset.src; } else { item.src = "../../images/timg.gif"; } _self.setData({ imgArr: _self.data.imgArr }); } }) }) }, }) 懶加載示例 {{item.title}}
如圖所示:
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/105236.html
摘要:一傳統(tǒng)的懶加載有時(shí)一個(gè)頁面中有多個(gè)圖片或視頻要展示如果全部將資源加載顯示會導(dǎo)致頁面暫時(shí)空白用戶體驗(yàn)很不好要改變這種體驗(yàn)的一種思路是先用一個(gè)占位圖片顯示然后在可視窗口展示的內(nèi)容提前加載保證用戶看到的是已經(jīng)加載好的圖片等其他占用空間較大的資源例 一.傳統(tǒng)的懶加載 有時(shí)一個(gè)頁面中有多個(gè)圖片或視頻要展示,如果全部將資源加載顯示,會導(dǎo)致頁面暫時(shí)空白,用戶體驗(yàn)很不好,要改變這種體驗(yàn)的一種思路是先用...
摘要:當(dāng)一個(gè)的項(xiàng)目體積變得十分龐大的時(shí)候,使用的代碼分離功能將,或的代碼進(jìn)行分離并按需加載,會極大的提高的首屏加載速度。如果我們使用函數(shù)在中返回模塊作為載荷,就實(shí)現(xiàn)了懶加載。 當(dāng)一個(gè)Vue的項(xiàng)目體積變得十分龐大的時(shí)候,使用Webpack的代碼分離功能將Vue Components,routes或Vuex的代碼進(jìn)行分離并按需加載,會極大的提高App的首屏加載速度。 showImg(https:...
摘要:在本文中,我們將了解中的懶加載和即時(shí)加載以及它如何在后臺運(yùn)行?,F(xiàn)在所有的房屋數(shù)據(jù)和在關(guān)系表中的數(shù)據(jù)都同時(shí)加載出來了,查詢的語句的是使用即時(shí)加載時(shí)僅執(zhí)行個(gè)查詢??偨Y(jié)現(xiàn)在你理解了這個(gè)過程,希望它能幫助你理解懶加載和即時(shí)加載的用法和基本原理。 Laravel中的Eloquent(ORM)的工作方式很令人驚訝,并提供訪問數(shù)據(jù)庫的非常簡單的方法。在本文中,我們將了解Laravel Eloquen...
閱讀 2950·2021-11-23 09:51
閱讀 3776·2021-11-22 15:29
閱讀 3226·2021-10-08 10:05
閱讀 1552·2021-09-22 15:20
閱讀 952·2019-08-30 15:56
閱讀 1069·2019-08-30 15:54
閱讀 733·2019-08-26 11:54
閱讀 2636·2019-08-26 11:32