网站优化之路---图片优化，图片从模糊到清晰
时间：2023-03-31 11:55:58
CSS
网站优化之路---图片优化，图片从模糊到清晰在优化的过程中，需要考虑如何优化。优化一个网站，资源优化应该考虑前端（减少http请求，固定图片压缩，合并精灵，或者使用图标字体），安全问题（代码压缩和丑化，存储cookie或存储时加密），性能优化。资源优化最重要的是图片优化，加载图片是非常耗资源的。一般情况下，图片未加载时，如果没有外层标签限制高度，图片是没有位置的。图片资源加载完成后，会开始下载。如果图片足够大，图片会从头到尾缓慢显示。人们感到非常不舒服。解决方案图片优化其实有两种解决方案：先显示一张背景图片，然后在加载图片时显示加载图片的缩略图，然后进行模糊处理。缩略图非常小。结合模糊效果，它可以比纯色更好的占位符而不牺牲负载。画面全显时，显示大画面，同时由模糊到清晰。当然，如果想要更好的效果，还需要配合图片的懒加载，即当滚轮滚动到特定位置时，再加载图片。本文重点介绍第二种解决方案，图片由模糊变清晰，废话不多说，上面代码图片由模糊变清晰html部分
css部分图.image-wrap{width:500px;高度：312px；位置：相对；溢出：隐藏；}图.image-wrap.oldImage{宽度：100%；-webkit-过滤器：模糊（10px）；转换：所有0.5s}js部分varimage=document.querySelector('.oldImage'),imageParentDom=image.parentNode,src=image.dataset.src;varnewImage=document.createElement('img');newImage.src=src;新图像e.style.cssText='position:absolute;left:0;top:0;width:100%;z-index:-1';newImage.onload=function(){imageParentDom.appendChild(newImage);setTimeout(()=>{imageParentDom.removeChild(image);},500)}
