懒加载
幻梦主题支持图片懒加载,仅在图片进入视口时才开始加载,显著提升页面首屏速度。
原生懒加载
所有图片均使用 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%,尤其对于包含大量图片的文章页面效果显著。访问者只看到需要的图片,带宽得到更有效的利用。