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

要实现图片加载时由模糊逐渐变得清晰的效果,可以使用 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. 其他优化

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

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

相关推荐
FIN666816 小时前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD16 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆16 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel16 小时前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒17 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus17 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
北海-cherish1 天前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909061 天前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist1 天前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师1 天前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学