网站建设交流发言稿,西安人才网官网,公司网站开发需求文档,网站开发转包协议一、前言
在网速较低或者网站的服务器宽带只有几MB的情况下#xff0c;网页中的图片加载时#xff0c;要么空白#xff0c;要么像打印机一样一行一行地“扫描”出来#xff0c;为了提升用户体验#xff0c;可以给图片标签外加一层骨架。 无骨架 有骨架 二、详细设计
每张…一、前言
在网速较低或者网站的服务器宽带只有几MB的情况下网页中的图片加载时要么空白要么像打印机一样一行一行地“扫描”出来为了提升用户体验可以给图片标签外加一层骨架。 无骨架 有骨架 二、详细设计
每张图片都要配一张它的低分辨率图片可以在photoshop中完成。建议加上一个高斯模糊。这个图片用作骨架的底图它的大小只有30k左右页面很快就能加载好。 这是没加骨架的html
div classboximg src/assets/load1.jpg
/div
加骨架后
div classbox blur-load :class{loaded:isLoaded} :style{backgroundImage: url( require(/assets/loading1.jpg) )}img src/assets/load1.jpg
/div
blur-load是骨架样式loaded是控制图片是否显示后面的style是加载刚刚说的底图。
这是blur-load的css
.blur-load{background-size: cover;background-position: center;background-repeat: no-repeat;
}
.blur-load::before{content: ;position: absolute;inset: 0;animation: pulse 2.5s infinite ease-in-out;background-color: rgba(255,255,255,0.3);
}
keyframes pulse {0%{background-color: rgba(255,255,255,0.3);}50%{background-color: rgba(255,255,255,0);}100%{background-color: rgba(255, 255, 255, 0.3);}
}
.blur-loadimg{opacity: 0;
}
.blur-load.loadedimg{opacity: 1;transition: opacity 0.5s ease-in-out;
}
图片加载好后显示图片
image_load(){let img new Image();img.src require(/assets/load2.png);img.onload (){this.isLoaded true;}
}
在生命周期mounted中调用该方法
mounted(){this.image_load();
},
