起因：
在访问自己部署的前端项目的时候发现，背景图片加载太慢，并不是很美观。
这是因为，除了 JavaScript 和 CSS，网站通常还会包含大量的图片。当自己把<img> 元素添加到网站里面时，对应的所有图片资源都会在页面初始化时被下载下来。在网站就绪之前下载几 M 的图片资源并不罕见，会给人一种性能不好的印象。
了解了一下关于图片的性能优化，除了对图片进行压缩，缩略图，异步加载还有懒加载之外，觉得还是图片的渐进式加载更加美观。虽然目前很多框架都能实现这个效果，还是用原生的js来实现以下，废话少说，直接开搞。
实现：
html代码：
<img src="./public/placeholder.jpg" data-src="./public/test2.jpeg" alt="BACG" />这两张图片会在网站构建完 HTML 主体框架之后通过 JavaScript 进行加载。图片占位符被缩放到和真正的图片一样大小，所以它们会占据同样的空间，在真正的图片完成加载后，也不会导致页面重绘。(注：placeholder。jpg是用来占位的，最重要显示的是图片test2.jpeg)
js代码：
let imagesToLoad = document.querySelectorAll("img[data-src]");
const loadImages = (image) => {
image.setAttribute("src", image.getAttribute("data-src"));
image.onload = () => {
image.removeAttribute("data-src");
};
};
当函数 loadImages 把图片地址从 data-src 移动到 src 上时，imagesToLoad 变量包含了所有图片的链接。当每个图片都已经加载完成时，会把 data-src 属性移除掉，因为它已经没有任何用处了。之后，遍历所有的图片，然后加载它们：
imagesToLoad.forEach((img) => {
loadImages(img);
});
此时我们已经完成一大半了，接下来通过css进行优化实现模糊效果
css代码：
article img[data-src] {
filter: blur(0.2em);
}
article img {
filter: blur(0em);
transition: filter 0.5s;
}
最终效果
最初加载
两张图片的清晰度是不一样的。
