图片渐进式加载

最近项目中发现一个问题，有一张很大的高清图片加载很慢，导致页面效果不太好，存在短暂的空白时间。

当你把 元素添加到网站里面时，对应的所有图片资源都会在页面初始化时被下载下来。在网站就绪之前下载几 M 的图片资源并不罕见，但它还是会给人一种性能不好的印象。我们并不需要在一打开网站的时候就以最高的画质呈现所有的图片。

又是就想到了一个优化方案，图片渐进式加载。

先用一张较小的非高清的图片占位，然后下载高清图片，等高清图片加载完毕再进行替换。在这过程中用css制造模糊效果。

代码与部分伪代码如下：

html

<img class="model-img" [src]="tyreImgOfCar" alt="车辆轮胎透视图" />

css

.model-img {
     height: 100%;
     width: 100%;
     filter: blur(4px);
     transition: all 0.7s;   // 在0.7秒内移除模糊效果
}
.complete {
     filter: blur(0);
}

js

class 组件类 {
    tyreImgOfCar = `非高清图片路径`;
    
    组件加载完成钩子函数() {
        const imgEl = document.querySelector('.model-img');
        if (imgEl) {
            setTimeout(() => {
                const imgUrl = `高清图片地址`;
                const imgObject = new Image();
                imgObject.src = imgUrl;
                imgObject.onload = function () {
                    imgEl.src = imgUrl;
                    imgEl.setAttribute('class', 'model-img complete');
                };
            });
        }
    }
}

效果：