延迟加载只加载第一张图片

Question

急需帮助！我正在尝试使用 vanilla javascript 向我的项目添加延迟加载功能，但它只加载第一张图像，其他图像保持模糊且未加载。

这是脚本：

// Lazy loading images
const imgTargets = document.querySelectorAll('img[data-src]');

const loadImg = function (entries, observer) {
  const [entry] = entries;

  if (!entry.isIntersecting) return;

  // Replace src with data-src
  entry.target.src = entry.target.dataset.src;

  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  });

  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
  rootMargin: '200px',
});

imgTargets.forEach(img => imgObserver.observe(img));

HTML 代码：

<div class="popup swiper-slide swiper-slide2 first-non" style="background: transparent;">
        <img class="lazy-img fetures__img" 
        src="assets/theme/images/laz-non-legendary-1.png"
        data-src="assets/theme/images/non-legendary-1.png" />
      </div>
      <div class="popup swiper-slide swiper-slide2 first-non" style="background: transparent;">
        <img class="lazy-img fetures__img" 
        src="assets/theme/images/laz-non-legendary-2.png"
        data-src="assets/theme/images/non-legendary-2.png" />
      </div>
      <div class="popup swiper-slide swiper-slide2 first-non" style="background: transparent;">
        <img class="lazy-img fetures__img" 
        src="assets/theme/images/laz-non-legendary-3.png"
        data-src="assets/theme/images/non-legendary-3.png" />
      </div>

这里CSS只是为了模糊效果：

.lazy-img {
  filter: blur(20px);
}

Answer 1

图片来源

entry.target.src = entry.target.dataset.src.replace("w=10&", "w=800&");

根据需要控制阈值

threshold: 0.2

脚本代码

// Lazy loading images
const imgTargets = document.querySelectorAll('img[data-src]');

const loadImg = function (entries, observer) {
  const [entry] = entries;

  if (!entry.isIntersecting) return;

  // Replace src with data-src
  entry.target.src = entry.target.dataset.src.replace("w=10&", "w=800&");

  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  });

  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0.2,
  rootMargin: '200px',
});

imgTargets.forEach(img => imgObserver.observe(img));

延迟加载只加载第一张图片

Lazy load only loads first image

html

javascript

css

lazy-loading