前端加载大图片从模糊到清晰.docxVIP

前端加载大图片从模糊到清楚 古德 2021-05-19 打开天猫任凭点了个链接，加载了一张大的背景图片，该图片从格外模糊到正常显示有一个过程，深化了解一下它的实现过程。 打开把握台，禁用Cache，模仿2G网络，刷新页面 查看恳求列表，扫瞄器先恳求了一张缩略图，设置为div的背景图片，div宽高等同于整个页面，效果看起来就像页面已经显示出来一样 在缩略图之上，才是正常尺寸图片显示到地方，当图片加载完毕显示出来就遮住了模糊的缩略图，当然也可以替换掉缩略图，在用户看来，模糊的图片随着加载过程变清楚了 假如直接给缩略图之上的img元素设置src，略微大一点的图片加载起来是这幅德行： 这样的效果，男人看了缄默女人看了流泪，明显无法满足老板的要求，处理方法是等图片完全加载好了再显示出来，具体点来说： 创建image对象，将要加载的图片URL赋值给image对象的src，监听image对象的onload大事，在大事回调函数内修改img元素的src，也可以设置图片元素的position将元素偏移非可视区直接加载，图片加载完后丢回可视区 缩略图比较难看，为了有更好的用户体验，可以给缩略图加个高斯模糊filter: blur(4px)，图片加载完毕修改img src属性后，再将高斯模糊渐渐过渡到filter: blur(0)，图片就清楚了 最终效果： demo中，缩略图用base64编码表示，这是节省带宽的一种方式，假如有多个缩略图，可用一个http恳求以字符串按某个分隔符的方式前往，前端解析后使用，削减了http恳求，图片加载优化还有更多方式，包括用css绘制简约的样式替代图片（依据需求选择更合适的图片格式，jpg适合颜色较多的场景，gif用于较简单的动画，png适用于半透亮?????场景），设置合理的缓存，图片懒加载（非可视区不加载）等等 demo完整代码 DOCTYPE htmlhtmlhead title大图片加载从模糊到清楚title style type=text/css ? ?.content{ ? ? ? ?position: relative; } ? ?.thumbnails{ ? ? ? ?width: 300px; ? ? ? ?position: absolute; ? ? ? ?left: 0; ? ? ? ?top: 0; ? ? ? ?z-index: 1; ? ? ? ?filter: blur(4px); ? ? ? ?transition: all 0.7s; } ? ?.complete{ ? ? ? ?filter: blur(0); } styleheadbody h3大图片加载从模糊到清楚h3 div class=content img class=thumbnails src=data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9Inhtc