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

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

1. 使用 CSS 实现模糊效果

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

HTML 示例:
html 复制代码
<img src="example.jpg" alt="Example Image" class="lazy-image">
CSS 示例:
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 示例:
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:
html 复制代码
<img src="example.jpg" alt="Example Image" class="lazy-image">
<img src="example2.jpg" alt="Example Image 2" class="lazy-image">
CSS:
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:
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');
        }
    });
});

4. 其他优化

如果你的图片比较多或者页面比较复杂,你可以结合懒加载和模糊加载效果一起使用,确保图片在进入可视区域时再进行模糊加载,从而提升页面性能和用户体验。

通过上述方式,你就可以实现图片由模糊逐渐清晰的效果,且加载过程更加优雅。

相关推荐
小桥风满袖19 分钟前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang29 分钟前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户730870117930831 分钟前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼32 分钟前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu35 分钟前
全屏滚动网站PC端自适应方案
前端
RoyLin42 分钟前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者44 分钟前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin2 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒2 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端