Vue页面 - 大型图片加载慢解决途径
1. 两个内外尺寸一致的盒子,外层放置压缩图,内层放置高清图,高清图加载完成后铺盖压缩图即可;2. 在不同阶段使用不同图片资源
·
解决图片加载慢的两种优化方式
- 两个内外尺寸一致的盒子,外层放置压缩图,内层放置高清图,高清图加载完成后铺盖压缩图即可
- 在不同阶段使用不同图片资源
// 优化2 不同阶段加载不同图片方法
// 此优化方案重点是对图片的加载状态loading进行监听 加载完成后再触发对应样式修改操作
<img src="//loadImg.png" style="display:none" @load="imgLoading"></img>
<div id="app" :class="{'loadImg':loadImgState}"><p class="iconbg"></p></div>
<style>
.iconbg{background: url(../initImg.png) 0 0 no-repeat;}
#app.loadImg .iconbg{background-image: url(../loadImg.png);}
</style>
<script>
new vue({
el:"#app",
data:{},
methods: {
// 监听imgLoading加载, 加载完成后 修改iconbg背景样式
imgLoading: e => {
this.loadImgState = true;
}
}
});
</script>
更多推荐
所有评论(0)