懒加载（Lazy Loading）是一种优化网页性能的常用技术，它能够延迟加载非关键资源，从而减少初始页面加载时间，提升用户体验。本文将深入解析懒加载图片的加载时机，并分享一些前端性能优化的秘诀。

图片懒加载原理

懒加载的核心思想是“按需加载”，即在用户滚动到页面上的某个位置时，才开始加载该位置的图片。这样，可以避免在页面初次加载时加载所有图片，减少数据传输量和内存消耗。

实现方式

懒加载图片的实现方式主要有以下几种：

  1. 原生JavaScript：通过监听滚动事件，判断图片是否进入可视区域，然后动态修改图片的src属性。
  2. Intersection Observer API：这是一个现代浏览器提供的API，可以监听元素是否进入另一个元素的可视区域。
  3. 图片预加载：通过预加载即将进入可视区域的图片，来优化用户体验。

图片懒加载时机

1. 滚动事件触发

当用户滚动页面时，懒加载库会检查所有图片是否进入可视区域。如果图片进入可视区域，则触发加载。

window.addEventListener('scroll', function() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach(function(img) {
    if (isInViewport(img)) {
      img.src = img.getAttribute('data-src');
      img.removeAttribute('data-src');
    }
  });
});

function isInViewport(img) {
  const rect = img.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

2. Intersection Observer API

使用Intersection Observer API可以更高效地实现懒加载，因为它不需要监听滚动事件。

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '0px',
  threshold: 0.1
});

const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
  observer.observe(img);
});

3. 图片预加载

在用户滚动到页面底部之前，预加载即将进入可视区域的图片。

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
      preloadNextImage();
    }
  });
}, {
  rootMargin: '0px',
  threshold: 0.1
});

function preloadNextImage() {
  const nextImage = images[0];
  if (nextImage) {
    nextImage.dataset.src = nextImage.src;
    nextImage.src = '';
    observer.observe(nextImage);
  }
}

observer.observe(images[0]);

前端性能优化秘诀

  1. 使用CDN：将图片存储在CDN上，可以加快图片的加载速度。
  2. 压缩图片：使用图片压缩工具减小图片文件大小，减少数据传输量。
  3. 使用WebP格式：WebP格式比JPEG和PNG格式具有更好的压缩效果，可以减小图片文件大小。
  4. 避免使用大尺寸图片：将图片分为多个尺寸，根据需要加载相应尺寸的图片。
  5. 使用懒加载：对于非关键图片，使用懒加载技术，减少初始页面加载时间。

通过以上方法，我们可以有效地实现图片懒加载，并优化前端性能，提升用户体验。