前端优化之图片的渐进式加载

起因：

在访问自己部署的前端项目的时候发现，背景图片加载太慢，并不是很美观。

这是因为，除了 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;
}

最终效果

最初加载

两张图片的清晰度是不一样的。