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>