圖片懶加載的現(xiàn)代 JavaScript 實現(xiàn),僅需十行代碼
過去,實現(xiàn)懶加載通常需要監(jiān)聽 scroll 事件,并結(jié)合 getBoundingClientRect() 等方法計算元素位置,代碼不僅繁瑣,而且頻繁的計算會引發(fā)性能問題。
現(xiàn)代瀏覽器提供了 Intersection Observer API,讓我們得以用一種極其高效和簡潔的方式來實現(xiàn)懶加載。多簡潔?核心邏輯只需 10 行代碼。
第一步:HTML 結(jié)構(gòu)準備
懶加載的原理很簡單:我們不直接將圖片的 URL 放在 src 屬性里,而是先放在一個自定義的 data-* 屬性(如 data-src)中。src 屬性可以指向一個極小的占位符圖片(比如一個 1x1 像素的透明 GIF 或低質(zhì)量的模糊圖),以避免出現(xiàn) broken image 圖標。
第二步:JavaScript 魔法(10 行代碼實現(xiàn))
現(xiàn)在,讓我們見證奇跡。創(chuàng)建一個 lazy-load.js 文件,并寫入以下代碼:
就是這樣!沒有復雜的計算,沒有混亂的事件監(jiān)聽器。代碼清晰、高效,并且符合現(xiàn)代 Web 標準。
代碼解析:為什么它能工作?
Intersection Observer (交叉觀察器) 是一個瀏覽器 API,它允許我們異步地觀察目標元素與其祖先元素或頂級文檔視窗(viewport)的交叉狀態(tài)。通俗地說,它能高效地告訴我們:“這個元素現(xiàn)在進入/離開屏幕了!”
讓我們分解一下這 10 行代碼:
- document.querySelectorAll('.lazy'): 我們選中所有帶有 .lazy 類的圖片元素。
- new IntersectionObserver(callback): 我們創(chuàng)建了一個觀察器。它的構(gòu)造函數(shù)接收一個回調(diào)函數(shù),當目標元素的可見性發(fā)生變化時,這個回調(diào)函數(shù)就會被觸發(fā)。
- entries: 這是回調(diào)函數(shù)接收的參數(shù),是一個數(shù)組,包含了所有發(fā)生可見性變化的被觀察元素的信息。
- entry.isIntersecting: 這是一個布爾值,true 代表目標元素至少有一部分進入了視口,false 則代表它完全離開了視口。這是我們實現(xiàn)懶加載的關(guān)鍵判斷。
- img.src = img.dataset.src: 一旦圖片可見,我們就執(zhí)行核心操作:將存儲在 data-src 中的真實圖片 URL 賦值給 src 屬性。瀏覽器會自動開始下載并顯示圖片。
- observer.unobserve(img): 這是至關(guān)重要的一步優(yōu)化。一旦圖片被加載,我們就不再需要觀察它了。調(diào)用 unobserve 可以告訴觀察器停止對該元素的監(jiān)視,從而節(jié)省了寶貴的計算資源。
- observer.observe(image): 最后,我們啟動觀察器,讓它開始監(jiān)視每一個需要懶加載的圖片。
進階優(yōu)化:預加載
Intersection Observer 還允許我們傳入一個配置對象,來更精細地控制“交叉”的定義。其中 rootMargin 屬性非常有用。
rootMargin 可以在視口(root)的每一邊添加一個“外邊距”,提前或延遲觸發(fā)回調(diào)。例如,我們可以讓圖片在距離進入視口還有 200px 時就開始加載。
這樣設(shè)置后,用戶向下滾動時,圖片會“提前”加載,當圖片真正進入視口時已經(jīng)準備好了,體驗會更加流暢。
Intersection Observer 不僅代碼量極少,而且在性能上遠超傳統(tǒng)方法,因為它將復雜的計算交給了瀏覽器底層去高效處理,不會阻塞主線程。