Typecho 图片实现懒加载

懒加载（Lazy Loading）是一种 前端优化 技术，它允许在页面加载时只加载当前可见区域内的内容，而延迟加载其他不可见区域的内容，从而 提高页面加载速度和性能。常见的应用场景是在网页中加载大量的图片或者长列表时，可以采用懒加载来优化用户体验。

HTML 结构设置：

在 HTML 中，为每张图片添加一个 data-src 属性来保存图片的真实 URL，同时给每个图片添加一个占位符（比如一个小的 loading 图片）。

<img class="lazy-image" data-src="path-to-your-image.jpg" src="loading-placeholder.jpg" alt="Image">
<img class="lazy-image" data-src="another-image.jpg" src="loading-placeholder.jpg" alt="Image">

CSS 样式：

为了确保图片在加载前不会被提前显示，你可以使用 CSS 将占位符图片的尺寸设置为实际图片应该显示的尺寸。

.lazy-image {
    width: 300px; /* 设置为实际图片的宽度 */
    height: 200px; /* 设置为实际图片的高度 */
}

JavaScript 实现：

使用 JavaScript 监听滚动事件，当图片进入可见区域时，将 data-src 属性的值赋给 src 属性，从而触发图片的加载。

const lazyImages = document.querySelectorAll('.lazy-image');

function lazyLoad() {
    lazyImages.forEach(image => {
        const rect = image.getBoundingClientRect();
        if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
            // 图片进入可见区域
            image.src = image.getAttribute('data-src');
            image.classList.remove('lazy-image'); // 可选：移除懒加载类
        }
    });
}

// 初始加载一次
lazyLoad();

// 监听滚动事件，触发懒加载
window.addEventListener('scroll', lazyLoad);