原生JS實現(xiàn)圖片懶加載(lazyload)實例
前言
圖片懶加載也是比較常見的一種性能優(yōu)化的方法，最近在用vue做一個新聞列表的客戶端時也用到了，這里就簡單介紹下實現(xiàn)原理和部分代碼。
實現(xiàn)原理
加載頁面的時候，圖片一直都是流量大頭，針對圖片的性能方法也挺多的比如base64、雪碧圖等；懶加載也是其中一種，主要原理是將非首屏的圖片src設為一個默認值，然后監(jiān)聽窗口滾動，當圖片出現(xiàn)在視窗中時再給他賦予真實的圖片地址，這樣可以保證首屏的加載速度然后按需加載圖片。
具體代碼
首先在渲染時，圖片引用默認圖片，然后把真實地址放在data-*屬性上面。
<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>
然后是監(jiān)聽滾動，直接用window.onscroll就可以了，但是要注意一點的是類似于window的scroll和resize，還有mousemove這類觸發(fā)很頻繁的事件，最好用節(jié)流(throttle)或防抖函數(debounce)來控制一下觸發(fā)頻率。underscore和lodash里面都有封裝這兩個方法，這里先不多做介紹了。
接著要判斷圖片是否出現(xiàn)在了視窗里面，主要是三個高度：1，當前body從頂部滾動了多少距離。2，視窗的高度。3，當前圖片距離頂部的距離。具體代碼如下：
window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
var bodyScrollHeight = document.body.scrollTop;// body滾動高度
var windowHeight = window.innerHeight;// 視窗高度
var imgs = document.getElementsByClassName('lazyloadimg');
for (var i =0; i < imgs.length; i++) {
var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度
if (imgHeight < windowHeight + bodyScrollHeight) {
imgs[i].src = imgs[i].getAttribute('data-src');
img[i].className = img[i].className.replace('lazyloadimg','')
}
}
}
結語
大概內容就這么多了，下次可能會補充一下防抖節(jié)流源碼的實現(xiàn)。最后再補充兩個常見的滾動判斷：
1.頁面滾動離開首屏(這時可顯示回到頂部的按鈕):document.body.scrollTop > window.innerHeight
2.頁面滾動到底部了(這時可去調接口獲取更多內容)：window.scrollY + window.innerHeight > document.body.offsetHeight
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jsp js鼠標移動到指定區(qū)域顯示選項卡離開時隱藏示例
jsp js 鼠標移動到指定區(qū)域顯示選項卡示例,離開時隱藏，具體實現(xiàn)代碼如下，感興趣的朋友可以了解下哈，希望對你有所幫助2013-06-06
這篇文章主要介紹了JS+CSS實現(xiàn)六級網站導航主菜單效果,涉及JavaScript遍歷頁面元素及動態(tài)修改css屬性的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了關于Bootstrap輪播圖的使用和理解的學習記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了JS鍵盤版計算器的制作方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JS可以控制樣式的名稱寫法，有需要的朋友可以參考一下2014-01-01
arguments.callee的使用方法，具體大家自己測試了2009-05-05
sass 中使用 /deep/ 修改 elementUI 組件樣式報錯
這篇文章主要介紹了sass 中使用 /deep/ 修改 elementUI 組件樣式報錯的解決方案,嘗試用 ::v-deep 替換 /deep/ ,成功解決了問題,感興趣的朋友跟隨小編一起看看吧2024-02-02
在JS中如何調用JSP中的變量，具體該怎么實現(xiàn)？下面有個不錯的示例，需要的朋友可以了解下2014-01-01
有時我們會有這樣的需求：讓圖片顯示在固定大小的區(qū)域。如果不考慮 IE6 完全可以使用 css 的 max-width 限制寬度自動按比例縮小顯示，但是這樣有個問題，就是如果按比例縮小后，圖片高度不夠，那么就很難看了2014-07-07
享元模式是一種用于性能優(yōu)化的模式。享元模式的核心是運用共享技術來有效支持大量細粒度的對象.如果系統(tǒng)中創(chuàng)建了大量類似的對象而導致內存占用過高，本文通過介紹書中文件上傳的優(yōu)化案例來說明享元模式的使用方式和作用,需要的朋友可以參考下2023-06-06