圖片懶加載是一種優(yōu)化網(wǎng)頁(yè)性能的技術(shù)，主要作用是延遲加載視口外的圖片，直到用戶滾動(dòng)到它們附近時(shí)才加載

以下是常見(jiàn)的幾種實(shí)現(xiàn)方式

1. 傳統(tǒng)滾動(dòng)事件監(jiān)聽(tīng)方式

監(jiān)聽(tīng)到scroll事件后，調(diào)用目標(biāo)元素的getBoundingClientRect()方法來(lái)實(shí)現(xiàn)。

function lazyLoad() {
    const images = document.querySelectorAll('img[data-src]');
?
    images.forEach(img => {
        if (img.getBoundingClientRect().top < window.innerHeight + 100) {
            img.src = img.dataset.src;
        }
    });
}
?
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
lazyLoad(); // 初始加載

缺點(diǎn)：性能較差，需要手動(dòng)處理節(jié)流

2、使用Intersection Observer API（現(xiàn)代推薦方式）

通過(guò)IntersectionObserverAPI 來(lái)實(shí)現(xiàn)，他可以自動(dòng)"觀察"元素是否可見(jiàn)。由于可見(jiàn)（visible）的本質(zhì)是，目標(biāo)元素與視口產(chǎn)生一個(gè)交叉區(qū)，所以這個(gè) API 叫做"交叉口觀測(cè)器"。

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
    // entries 是一個(gè)數(shù)組，包含了我們所需要監(jiān)聽(tīng)的所有圖片對(duì)象的信息
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target; 
      img.src = img.dataset.src;
      observer.unobserve(img); // 停止監(jiān)聽(tīng)
    }
  });
});
// 添加需要監(jiān)聽(tīng)的圖片
images.forEach(img => observer.observe(img));

優(yōu)點(diǎn)：性能好，不阻塞主線程，代碼簡(jiǎn)潔

IntersectionObserver是瀏覽器原生提供的構(gòu)造函數(shù)，可以自動(dòng)‘觀察’元素是否可見(jiàn)。

//觀察器實(shí)例
const io = new IntersectionObserver(callback,options)

參數(shù)

• callback: 是可見(jiàn)性變化時(shí)的回調(diào)函數(shù)。callback一般會(huì)觸發(fā)兩次
  • 一次是目標(biāo)元素剛剛進(jìn)入視口（開(kāi)始可見(jiàn)）
  • 另一次是完全離開(kāi)視口（開(kāi)始不可見(jiàn)）
• option: 是配置對(duì)象（該參數(shù)可選） 優(yōu)點(diǎn)：性能好，不阻塞主線程，代碼簡(jiǎn)潔

返回值：一個(gè)觀察期實(shí)例

觀察器實(shí)例方法：

• observe方法可以指定觀察哪個(gè)DOM節(jié)點(diǎn)，就需要多次調(diào)用observe方法
• unobserve方法用于停止對(duì)某個(gè)元素的觀察
• disconnect方法用于關(guān)閉觀察器

//開(kāi)始觀察box元素和container
io.server(document.getElementById('box'))
io.server(document.getElementById('container'))

//停止觀察box元素
io.unobserve(document.getElementById('box'))

//關(guān)閉觀察器
io.disconnect();

3. 使用loading="lazy"屬性（HTML原生支持）

<img src="image.jpg" loading="lazy" alt="...">

優(yōu)點(diǎn)：最簡(jiǎn)單的方式，現(xiàn)代瀏覽器都支持

缺點(diǎn)：兼容性問(wèn)題（IE不支持），控制粒度較粗

4、第三方庫(kù)實(shí)現(xiàn)

常用庫(kù)：

• lazysizes
• lozad.js
• vanilla-lazyload

以下是插件vanilla-lazyload的具體使用

進(jìn)入 https://www.npmjs.com/ 官網(wǎng)，然后在搜索框中輸入 vanilla-lazyload 回車 ，即可找到該插件

5. 框架內(nèi)置懶加載

• React: 使用 react-lazyload 等庫(kù)
• Vue: 有 vue-lazyload 插件
• Angular: 有內(nèi)置的懶加載支持

實(shí)現(xiàn)要點(diǎn)

• 使用data-src自定義屬性代替src屬性存儲(chǔ)真實(shí)圖片URL
• 設(shè)置占位圖（可以是小尺寸預(yù)覽圖或純色背景）
• 考慮添加加載動(dòng)畫或過(guò)渡效果
• 對(duì)于重要圖片（如首屏）不要使用懶加載

選擇哪種方式取決于項(xiàng)目需求、目標(biāo)瀏覽器支持和開(kāi)發(fā)環(huán)境?，F(xiàn)代項(xiàng)目推薦優(yōu)先使用Intersection Observer或原生loading屬性。

到此這篇關(guān)于前端JavaScript實(shí)現(xiàn)圖片懶加載的方法詳解的文章就介紹到這了,更多相關(guān)JavaScript圖片懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論