前端页面加载由模糊到清晰的实现方案

news2024/9/17 8:28:16

要实现图片加载时由模糊逐渐变得清晰的效果，可以使用 CSS 和 JavaScript 的结合。这里的思路是：先让图片在加载时模糊显示，等图片完全加载完后，再去掉模糊效果。

1. 使用 CSS 实现模糊效果

我们可以使用 filter: blur() 来为图片添加模糊效果，结合 transition 属性在加载完成时逐渐移除模糊效果。

HTML 示例：

<img src="example.jpg" alt="Example Image" class="lazy-image">

CSS 示例：

/* 初始模糊效果 */
.lazy-image {
    filter: blur(10px);
    transition: filter 1s ease; /* 1秒的模糊过渡效果 */
    opacity: 0.5; /* 可以先显示半透明，过渡到完全清晰 */
}

/* 图片加载完成后移除模糊效果 */
.lazy-image.loaded {
    filter: blur(0);
    opacity: 1;
}

2. 使用 JavaScript 检测图片加载完成

我们使用 JavaScript 监听图片的加载事件，当图片加载完成时，移除模糊效果。

JavaScript 示例：

document.addEventListener("DOMContentLoaded", function () {
    const lazyImages = document.querySelectorAll("img.lazy-image");

    lazyImages.forEach(img => {
        img.addEventListener('load', () => {
            img.classList.add('loaded'); // 添加 loaded 类来触发清晰效果
        });

        // 如果图片已经缓存中，可以立即触发加载事件
        if (img.complete) {
            img.classList.add('loaded');
        }
    });
});

3. 完整代码

这是一个完整的示例，结合 HTML、CSS 和 JavaScript 实现图片由模糊到清晰的过渡效果。

HTML：

<img src="example.jpg" alt="Example Image" class="lazy-image">
<img src="example2.jpg" alt="Example Image 2" class="lazy-image">

CSS：

/* 图片初始状态为模糊 */
.lazy-image {
    filter: blur(10px);
    transition: filter 1s ease, opacity 1s ease; /* 模糊和透明度过渡效果 */
    opacity: 0.5; /* 初始透明度 */
}

/* 加载完成时，去掉模糊效果和半透明 */
.lazy-image.loaded {
    filter: blur(0);
    opacity: 1;
}

JavaScript：

document.addEventListener("DOMContentLoaded", function () {
    const lazyImages = document.querySelectorAll("img.lazy-image");

    lazyImages.forEach(img => {
        img.addEventListener('load', () => {
            img.classList.add('loaded'); // 图片加载完成后添加 "loaded" 类
        });

        // 如果图片已经在缓存中，直接触发加载完成的效果
        if (img.complete) {
            img.classList.add('loaded');
        }
    });
});