懒加载

幻梦主题支持图片懒加载,仅在图片进入视口时才开始加载,显著提升页面首屏速度。

原生懒加载

所有图片均使用 HTML5 原生的 loading="lazy" 属性:

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

JavaScript 增强

对于需要更精细控制的场景,主题还提供了 IntersectionObserver 方案:

initLazyLoad() {
  const images = document.querySelectorAll('img[data-src]');
  const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        imageObserver.unobserve(img);
      }
    });
  });
  images.forEach(img => imageObserver.observe(img));
}

性能收益

懒加载可以减少初始页面加载量 30%-50%,尤其对于包含大量图片的文章页面效果显著。访问者只看到需要的图片,带宽得到更有效的利用。