快捷導(dǎo)航

JavaScript的懶加載處理的方式

更新時間：2023年10月27日 10:38:26 作者：小貓娃來啦

懶加載是一種優(yōu)化技術(shù),它可以延遲加載某些資源,直到它們真正需要被使用的時候才進(jìn)行加載,實現(xiàn)懶加載的方法一般分為兩種：基于 Intersection Observer API 的懶加載和基于滾動事件的懶加載,本文給大家介紹JavaScript的懶加載處理方式,感興趣的朋友一起看看吧

什么是懶加載

懶加載（Lazy Loading）是一種優(yōu)化技術(shù)，它可以延遲加載某些資源，直到它們真正需要被使用的時候才進(jìn)行加載。這種技術(shù)可以提升應(yīng)用程序或網(wǎng)站的性能，減少初始加載時間。

實現(xiàn)懶加載的方式

實現(xiàn)懶加載的方法一般分為兩種：基于 Intersection Observer API 的懶加載和基于滾動事件的懶加載。
Intersection Observer API 是一個新的瀏覽器 API，它可以異步觀察目標(biāo)元素與其祖先元素或頂級文檔視窗的交集情況。我們可以使用它來實現(xiàn)懶加載。

下面是一種實現(xiàn)懶加載的常見方式（Intersection Observer API）：

1.在HTML中標(biāo)記需要延遲加載的元素，通常是圖片、視頻等資源。可以使用data屬性或class來添加標(biāo)記。

示例：

<img class="lazy" data-src="image.jpg" alt="Lazy-loaded Image">

2.使用JavaScript監(jiān)聽頁面滾動事件或其他觸發(fā)事件，檢查需要加載的元素是否進(jìn)入了可視區(qū)域。

使用Intersection Observer API：

// 觀察器選項
const options = {
  root: null, // 默認(rèn)為視窗
  rootMargin: '0px',
  threshold: 0.5 // 當(dāng)目標(biāo)元素50%可見時觸發(fā)加載
};
const handleIntersection = (entries,) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
 // 加載目標(biāo)元素
      const target = entry.target;
      target.src = target.dataset.src;
      observer.unobserve(target);
    }
  });
};
// 創(chuàng)建一個觀察器實例
const observer = new IntersectionObserver(handleIntersection, options);
// 找到所有需要懶加載的元素并進(jìn)行觀察
const lazyElements = document.querySelectorAll('.lazy');
lazyElements.forEach(element => {
  observer.observe(element);
});

我們通過Intersection Observer API來監(jiān)聽目標(biāo)元素是否進(jìn)入可視區(qū)域，并在元素可見時將data-src屬性的值賦給src屬性來加載資源。觀察器選項可以根據(jù)需求進(jìn)行調(diào)整。

或者說，你也可以根據(jù)一定的步驟去實現(xiàn)

js四步法

設(shè)置占位圖

在HTML中，將需要懶加載的圖片的src屬性設(shè)置為一個占位圖，可以是一張小尺寸、模糊或單色的圖片，表示圖片正在加載。

<img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Lazy-loaded Image">

監(jiān)聽滾動事件

使用JavaScript監(jiān)聽頁面的滾動事件，當(dāng)滾動事件觸發(fā)時，判斷懶加載圖片是否進(jìn)入了可視區(qū)域。

window.addEventListener('scroll', function() {
  // 判斷懶加載圖片是否進(jìn)入可視區(qū)域
  // 如果圖片進(jìn)入可視區(qū)域，則觸發(fā)加載圖片的函數(shù)
});

加載圖片

當(dāng)懶加載圖片進(jìn)入可視區(qū)域時，將占位圖的data-src屬性值賦給src屬性，從而觸發(fā)加載圖片。

function lazyLoad() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyImages.forEach(function(img) {
    if (isInViewport(img)) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

觸發(fā)加載函數(shù)

在滾動事件中觸發(fā)加載函數(shù)，實現(xiàn)懶加載的效果。

window.addEventListener('scroll', function() {
  lazyLoad();
});

這也是一種實現(xiàn)懶加載的方式，但需要注意的是，在實際使用中可能需要根據(jù)具體情況進(jìn)行適當(dāng)?shù)恼{(diào)整和優(yōu)化，例如添加防抖和節(jié)流機(jī)制，處理圖片加載失敗等情況。同時，還可以使用現(xiàn)有的懶加載庫來簡化代碼并實現(xiàn)更多功能。

到此這篇關(guān)于JavaScript的懶加載處理的文章就介紹到這了,更多相關(guān)js 懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: