前言
我们在开发过程中，经常会遇到很大的图片（如banner图），当网络比较慢的时候，请求到很大的图片，白屏时间较长。
所以，本文采用了一种方法缩减了白屏时间。主要策略是：先加载大图对应的小图，等大图加载好以后进行替换。
1.准备好两张图，一个大图，一个小图
2.在html中先加载小图，并将小图进行模糊处理
html引入图片路径,写好一个thumbnails类
<img class="thumbnails" src="./img/bg_min.jpg">
写好样式：thumbnails为一开始模糊的图，complete为加载大图完成后不模糊的样式
.thumbnails {
filter: blur(4px);// 模糊处理
transition: all 0.7s;
}
.complete {
filter: blur(0);
}
初识页面就是现在这个效果了
3.通过js，创建一个Image加载大图，加载大图完毕后替换一开始加载的小图的src
// 可进行封装，为多个大图进行由模糊到清晰的处理let ele = document.querySelector('.thumbnails');let imgUrl = './img/bg.png';
let imgObject = new Image();
imgObject.src = imgUrl;
imgObject.onload = function () {
ele.src = imgUrl;
ele.setAttribute('class', 'thumbnails complete');
}
完整代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="../common/jquery-3.4.1.min.js" type="text/javascript"></script><title>图片从模糊到清楚</title><style>
.content {
position: relative;
}
.thumbnails {
width: 1000px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
filter: blur(4px);
transition: all 0.7s;
}
.complete {
filter: blur(0);
}
</style>
</head>
<body><h3>大图片加载从模糊到清晰</h3><!-- 一开始加载不清楚的图片 --><div class="content"><img class="thumbnails" src="./img/bg_min.jpg"></div>
</body>
<script>var ele = document.querySelector('.thumbnails');
var imgUrl = './img/bg.png';
var imgObject = new Image();
imgObject.src = imgUrl;
imgObject.onload = function () {
ele.src = imgUrl;
ele.setAttribute('class', 'thumbnails complete');
}
</script>
</html>
本文来自投稿，不代表本站立场，如若转载，请注明出处：
