解决图片加载慢的两种优化方式文章来源地址https://www.toymoban.com/news/detail-559777.html
- 两个内外尺寸一致的盒子，外层放置压缩图，内层放置高清图，高清图加载完成后铺盖压缩图即可
- 在不同阶段使用不同图片资源
// 优化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>
文章来源：https://www.toymoban.com/news/detail-559777.html
到了这里，关于Vue页面 - 大型图片加载慢解决途径的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
