javascript
JS里面的懒加载(lazyload)
懶加載技術(shù)(簡(jiǎn)稱lazyload)并不是新技術(shù), 它是js程序員對(duì)網(wǎng)頁(yè)性能優(yōu)化的一種方案.lazyload的核心是按需加載
涉及到圖片，falsh資源 , iframe, 網(wǎng)頁(yè)編輯器(類似FCK)等占用較大帶寬，且這些模塊暫且不在瀏覽器可視區(qū)內(nèi),因此可以使用lazyload在適當(dāng)?shù)臅r(shí)候加載該類資源.避免網(wǎng)頁(yè)打開時(shí)加載過多資源，讓用戶等待太久，
來(lái)，舉個(gè)栗子，當(dāng)你去東哥的綠帽網(wǎng)網(wǎng)購(gòu)的時(shí)候，打開首頁(yè)的時(shí)候，直接在導(dǎo)航欄選了商品種類跳轉(zhuǎn)到了列表頁(yè)，那首頁(yè)下方那些未顯示的區(qū)域的圖片需不需要加載，當(dāng)然不需要了，你根本沒看他們，加載出來(lái)干啥
說白了就是占著茅坑不拉粑粑，那我們?cè)趺唇鉀Q呢，這時(shí)我們就該用到懶加載技術(shù)，只有當(dāng)這部分圖片出現(xiàn)在可視區(qū)內(nèi)再去請(qǐng)求服務(wù)器。
懶加載的核心：在如何在適當(dāng)?shù)臅r(shí)候加載用戶需要的資源(這里用戶需要的資源指該資源呈現(xiàn)在瀏覽器可視區(qū)域)
下面來(lái)一個(gè)大栗子
來(lái)，把朕的代碼例子呈上來(lái)
例子的思路：頁(yè)面渲染時(shí)將src路徑放到自定義屬性中去，這樣頁(yè)面加載時(shí)圖片就不會(huì)去請(qǐng)求服務(wù)器，當(dāng)圖片滾動(dòng)到可視區(qū)內(nèi)時(shí)，獲取它的自定義屬性并賦值給src
這是頁(yè)面的布局，圖片路徑注意改一下子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}img{width: 200px;height: 200px;display: block;float: left;}</style> </head> <body><img src="" data-url ="img/1.jpg"><img src="" data-url ="img/2.jpg"><img src="" data-url ="img/3.jpg"><img src="" data-url ="img/4.jpg"><img src="" data-url ="img/5.jpg"><img src="" data-url ="img/6.jpg"><img src="" data-url ="img/7.jpg"><img src="" data-url ="img/8.jpg"><img src="" data-url ="img/9.jpg"><img src="" data-url ="img/10.jpg"><img src="" data-url ="img/1.jpg"><img src="" data-url ="img/2.jpg"><img src="" data-url ="img/3.jpg"><img src="" data-url ="img/4.jpg"><img src="" data-url ="img/5.jpg"><img src="" data-url ="img/6.jpg"><img src="" data-url ="img/7.jpg"><img src="" data-url ="img/8.jpg"><img src="" data-url ="img/9.jpg"><img src="" data-url ="img/10.jpg"><img src="" data-url ="img/1.jpg"><img src="" data-url ="img/2.jpg"><img src="" data-url ="img/3.jpg"><img src="" data-url ="img/4.jpg"><img src="" data-url ="img/5.jpg"><img src="" data-url ="img/6.jpg"><img src="" data-url ="img/7.jpg"><img src="" data-url ="img/8.jpg"><img src="" data-url ="img/9.jpg"><img src="" data-url ="img/10.jpg"><img src="" data-url ="img/1.jpg"><img src="" data-url ="img/2.jpg"><img src="" data-url ="img/3.jpg"><img src="" data-url ="img/4.jpg"><img src="" data-url ="img/5.jpg"><img src="" data-url ="img/6.jpg"><img src="" data-url ="img/7.jpg"><img src="" data-url ="img/8.jpg"><img src="" data-url ="img/9.jpg"><img src="" data-url ="img/10.jpg">
?
來(lái) 上關(guān)鍵的JS代碼
<script>//頁(yè)面加載時(shí)先調(diào)用一次loadImg函數(shù) loadImg()//添加滾動(dòng)事件window.onscroll = function () {loadImg()}function loadImg() {var iH = document.documentElement.clientHeight;var t = document.documentElement.scrollTop || document.body.scrollTop;var img = document.getElementsByTagName("img");for (var i = 0; i < img.length; i ) {if ((!img[i].bstop) && offsetTop1(img[i]) < (iH t)) {//注意 真正在頁(yè)面上使用一定要加開關(guān),不加開關(guān)每次條件符合時(shí)都會(huì)重新請(qǐng)求服務(wù)器，還不如不用懶加載//理解不了啥意思的同學(xué)，可以把img[i].bstop刪去試試//同時(shí)不要用offsetTop //因?yàn)閛ffsetTop是獲取離已定位的父元素的top值 //所以自己封裝一個(gè)計(jì)算offsetTop的函數(shù)var src = img[i].getAttribute("data-url");img[i].src = src;img[i].bstop = true;console.log(1)}}}//封裝獲取元素離上方的高度的函數(shù)function offsetTop1(obj) {var t = obj.offsetTop;while (obj.offsetparent) {obj = obj.offsetparent;t = t obj.offsetTop;}return t;} </script>?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的JS里面的懒加载(lazyload)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 报错集锦
- 下一篇： JS中的兼容问题总结