企业做网站需要注意事项,黄骅港属于哪个省哪个市,代理记账公司注册需要什么条件,泰安搭建公司1. 什么是渐进式图片
当我们网站会加载很多图片的时候#xff0c;有些图片尺寸很大#xff0c;加载就会很慢#xff0c;会导致页面长时间陷入白屏状态#xff0c;用户体验很不好。所以可以使用渐进式图片#xff0c;先给用户展示模糊图#xff0c;这些图尺寸小#xff…
1. 什么是渐进式图片
当我们网站会加载很多图片的时候有些图片尺寸很大加载就会很慢会导致页面长时间陷入白屏状态用户体验很不好。所以可以使用渐进式图片先给用户展示模糊图这些图尺寸小加载快可以快速显现出来。然后再逐步传输大图大图传输完成之后替换模糊图。这就是渐进式图片。
2. 实现方式
有两种方案一种靠设计师一种靠自己
2.1 靠设计师
直接让设计师给你渐进式图片因为 jpg 图片支持多帧设计师可以在第一帧放一个模糊图在第二帧放高清图。在传输的时候浏览器首先会收到模糊图并展示然后再慢慢传输高清图一步一步去替换模糊图。但是这有两个缺陷一个是浏览器兼容还有一个是设计师不干或者不会。
2.2 靠自己
我们构建一个 ProgressiveImg.vue 组件实现渐进式图片。实现思路是传入两个图片一张模糊一张高清高清图片加载完成后触发替换。
ProgressiveImg.vue 组件构建
script setupdefineProps({placeholder: String,origin: String,});const handleLoaded (e) {e.target.parentElement.classList.add(loaded);};
/scripttemplatediv classprogressiveimg classimg placeholder :srcplaceholder /img loadhandleLoaded classimg origin :srcorigin //div
/templatestyle scoped.progressive {width: 100%;height: 100%;position: relative;}.img {width: 100%;height: 100%;display: block;object-fit: cover;transition: all 0.6s;}.origin {opacity: 0;position: absolute;left: 0;top: 0;filter: blur(10px);}.loaded .origin {opacity: 1;filter: blur(0);}
/style
使用 ProgressiveImg.vue 组件
script setupimport ProgressiveImg from ./components/ProgressiveImg.vue;import small from ./assets/_bg.jpg;import big from ./assets/bg.jpg;
/scripttemplatediv classcontainProgressiveImg :placeholdersmall :originbig //div
/templatestylebody {margin: 0;padding: 0;}.contain {width: 100vw;height: 100vh;}
/style
