：JS-圖片懶加載(LazyLoad)學(xué)習(xí)前端技術(shù)不得不提的——圖片懶加載(LazyLoad)
在互聯(lián)網(wǎng)的快車道上，網(wǎng)頁加載速度就像是一場與時(shí)間的賽跑，而圖片作為裝點(diǎn)頁面的重頭戲，卻常常因?yàn)槠潺嫶蟮捏w積成為拖慢速度的“減速帶”。這不，圖片懶加載這位“加速小能手”應(yīng)運(yùn)而生，它如同一位智慧的調(diào)度員，讓圖片在最恰當(dāng)?shù)臅r(shí)刻才閃亮登場，大大提升了網(wǎng)頁的首屏加載速度，讓用戶體驗(yàn)飛一般的感覺。下面，咱們就來聊聊圖片懶加載的那些事兒，看看它是怎樣施展魔法的。
圖片懶加載的魔力所在
想象一下，你打開一個(gè)網(wǎng)頁，還沒等你往下翻，所有圖片一股腦兒全涌進(jìn)來，這不僅讓加載速度慢如蝸牛，還可能消耗用戶寶貴的流量。而圖片懶加載的出現(xiàn)，就是為了解決這些問題。它巧妙地讓瀏覽器先加載屏幕內(nèi)可見區(qū)域的圖片，至于那些還在屏幕外“待命”的圖片，就先晾著，等到用戶滾動(dòng)頁面，圖片即將進(jìn)入視線時(shí)，才迅速加載。這樣一來，不僅首屏加載速度快如閃電，還幫用戶省了流量，真是一舉兩得！
瀏覽器加載的幕后故事
在揭秘懶加載之前，咱們得先了解下瀏覽器加載頁面的“劇本”。首先，瀏覽器讀取HTML，搭起DOM這棟大樓的框架；接著，CSS和JavaScript這些裝飾工上陣，把頁面打扮得漂漂亮亮；最后，圖片等“大塊頭”才開始下載。要是圖片太多，網(wǎng)絡(luò)通道就會(huì)堵得水泄不通，頁面加載自然就慢下來了。
那么，如何讓圖片乖乖聽話，該出手時(shí)才出手呢？別急，咱們一步步來。
1. HTML結(jié)構(gòu)的小變動(dòng)
首先，給圖片標(biāo)簽動(dòng)個(gè)小手術(shù)，把原本的src屬性換成data-src。這樣，圖片就不會(huì)一上來就被加載了。比如這樣：
html復(fù)制代碼<img data-src="美圖.jpg" alt="美麗風(fēng)景">
2. 監(jiān)聽滾動(dòng)，火眼金睛辨位置
接著，我們需要寫一段JavaScript，讓它像偵探一樣監(jiān)聽頁面的滾動(dòng)。每當(dāng)用戶滾動(dòng)，就檢查圖片是否接近或已經(jīng)進(jìn)入了可視區(qū)域。為了防止偵探過度熱情（頻繁觸發(fā)事件），我們可以用“防抖”或“節(jié)流”技巧來控制頻率。用Lodash的throttle函數(shù)是個(gè)不錯(cuò)的選擇：
javascript復(fù)制代碼window.addEventListener('scroll', _.throttle(checkImages, 200));
3. 動(dòng)態(tài)加載，適時(shí)露面
當(dāng)偵探發(fā)現(xiàn)目標(biāo)圖片已進(jìn)入“射程”，就讓圖片正式登臺(tái)亮相。怎么做呢？很簡單，把data-src里的地址轉(zhuǎn)移到src屬性上，圖片就乖乖加載了：
javascript復(fù)制代碼function checkImages() { // ...判斷邏輯... img.src = img.dataset.src; img.onload = function() { // 圖片加載完成后的處理 }; img.removeAttribute('data-src'); }
4. 優(yōu)化加載邏輯，避免過度渲染
別忘了，圖片加載完后，最好把它從監(jiān)聽列表里移除，避免重復(fù)加載，浪費(fèi)資源。另外，如果所有需要懶加載的圖片都加載完畢，也可以考慮停止監(jiān)聽滾動(dòng)事件，進(jìn)一步優(yōu)化性能。
代碼實(shí)戰(zhàn)演練
好了，理論說了一大堆，實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。下面是一個(gè)簡單的懶加載實(shí)現(xiàn)示例可供參考：
html復(fù)制代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./common.css"> <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> </head> <body> <img data-price="20" data-src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oc3eu.img?w=640&h=400&m=6"/> <img data-src="https://img.36krcdn.com/20190808/v2_1565254363234_img_jpg"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png"> <img data-src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642423719_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425030_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425101_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425061_img_000"> <img data-src="https://img.36krcdn.com/20190904/v2_1567591358070_img_jpg"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641974410_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641974454_img_000"> <script> const imgs = document.getElementsByTagName('img'); const num = imgs.length; let n = 0; document.addEventListener('DOMContentLoaded', () => { loadImage(); }) function loadImage() { // console.log('haha') // 是否在可視區(qū)？ let screenHeight = document.documentElement.clientHeight;// 一屏高度 // 滾動(dòng)條 // 不同瀏覽器的兼容性問題 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(let i = 0; i < num; i++) { // console.log(imgs[i].offsetTop); if (imgs[i].offsetTop < screenHeight + scrollTop) { // 數(shù)據(jù)屬性 // console.log(imgs[i].dataset.src, imgs[i].dataset.price) imgs[i].src = imgs[i].getAttribute('data-src'); n = i + 1; if(n === num) { // console.log('所有圖片加載完畢'); window.removeEventListener('scroll', throttledLayLoad); } } } } const throttledLayLoad = _.throttle(loadImage, 300) window.addEventListener('scroll', throttledLayLoad); </script> </body> </html>
這段代碼中，我們先選中所有帶有data-src屬性的圖片，然后在頁面加載完成后和滾動(dòng)時(shí)檢查圖片位置，一旦符合條件就加載圖片，整個(gè)過程流暢而高效。
尾聲
通過圖片懶加載，我們不僅優(yōu)化了網(wǎng)頁的加載速度，還提升了用戶體驗(yàn)，尤其是在移動(dòng)設(shè)備上，更是省時(shí)省流量的利器。當(dāng)然，如果你不想從零開始編碼，市面上也有一些成熟的庫，如Lozad.js，它們封裝好了懶加載的邏輯，讓你的開發(fā)工作事半功倍。總之，圖片懶加載是提升網(wǎng)頁性能的必備技能，學(xué)會(huì)它，讓你的網(wǎng)頁加載如絲般順滑，讓用戶愛不釋手！
該文章在 2024/6/17 9:41:09 編輯過
400 186 1886
