开发背景本站所有图片都是从上到下扫描渲染。如果网速慢，图片从0到1的整个过程会显得比较耗时，而且有很长的空白时间。为了解决这个问题，一开始我通常使用占位图，但是用真实图像替换占位图的过程会出现闪烁，所以我使用该项目针对渐进式加载图像进行了优化。渐进加载的整体流程？页面上的图片可以先加载一张模糊轮廓（小图）的图片，随着图片加载时间的增加，图片会逐渐变得清晰。这里需要注意几个问题：如何让用户无感知地更换新旧图片？如果页面需要渲染多张图片，难道我们不需要再添加n个DOM吗？在我们项目实际开发中，图片都是通过oss存储的，所以可以通过url+参数的形式获取小图片。比如http://image-demo.oss-cn-hang...,h_100,m_lfit。如果您使用其他链接，您可以自行替换和添加自定义说明。由于在项目中需要在多个地方使用，所以采用了全局添加的形式。importVuefrom'vue'constgradual=Vue.directive('gradual',{bind(el,binding){instertDom(el,binding)},})exportdefaultGradual项目中所有需要渐进加载的图片可以先换成小图。我们可以通过命令传值的形式发送真实图片。加载大小图片对比添加新图片和替换模糊图片之前提到的问题1.我们可以通过透明度从1到0的过渡效果隐藏模糊图片，其中使用的filter:blur()是确保模糊图像的像素化不那么明显。问题2，使用了img标签的onload事件。判断大图加载完成后，先给原DOM加一个隐藏效果，然后通过设置定时器删除原DOM。这里的定时器延时必须大于等于转场动画的延时才能保证所有的转场效果都显示出来。css部分.gradual.vague{filter:blur(2px);}.gradualimg.gradual-hide_img{不透明度：0；动画：origin1sease；}.gradualimg.gradual-hide_img{位置：绝对；左：0；顶部：0；}@keyframesorigin{0%{transform:scale(1);不透明度：1；}100%{变换：缩放（1.1）；不透明度：0；}}js部分constinstertDom=(target,binding)=>{Vue.nextTick(()=>{constparent=target.parentNodeparent.classList.add('gradual')target.classList.add('vague')constnewElement=document.createElement('img')newElement.classList.add('origin')//要先写onload再添加srcnewElement.onload=()=>{target.classList.add('gradual-hide_img')//删除原DOM定时器可以多个设置点setTimeout(()=>{target.remove()},1500)}newElement.src=binding.value.srcif(parent.lastChild===target){parent.appendChild(newElement)}else{parent.insertBefore(newElement,target.nextSibling)}})}ps：必须包含Vue.nextTick()，保证页面DOM加载完毕，否则页面中的target.parentNode会为null。总结渐进式加载的整体流程可以概括为：加载小图->渲染->加载大图->判断大图加载->给小图添加消失过渡->删除DOM小图像。
