使用背景图片实现加载效果

在开发中，我们常常看到这样的效果：数据未请求成功时APP背景显示的是页面的大概轮廓，其实实现这样的效果只需要设置好背景图片即可。
比如，实现如下的效果图：

我们需要两张svg图片：
链接：https://pan.baidu.com/s/1rxy4z6e_SG-QduQAvdNw2A
提取码：6m3b

以vue项目为例：
假如导航栏是一个列表:

<ul class="shop_list" v-if="shops.length">
</ul>

其中,shop是从后台获取的数据，shop初始化为一个空数组，由于向后台发送请求需要一定的事件才能获取到数据，因此此时这个列表是不显示的，我们用svg图片代替即可

<img src="./images/nav/msite_back.svg" alt="" v-else>

但是，当我们想要实现预加载效果的区域较大时，仅仅一张图片是不够的，因此此时我们用列表去渲染

<ul v-else>
          <li v-for="item in 6">
            <img src="./images/nav/shop_back.svg" alt="">
          </li>
 </ul>