vue实现图片预加载实操

业务场景是这样的：在页面里有一个提醒文案，提醒文案里有个按钮，点击按钮会弹出示例弹窗，弹窗里上面有标题，中间一个比较大的图片，27kb；下面有个按钮。在苹果手机使用微信打开时，上面的标题和下面的按钮都先于图片加载出来。中间的按钮过了一会才渲染出来。

为此，我也懒得去找ui沟通能不能把图片弄小一点，正好试试图片预加载这个功能。

于是，在网上搜索到
1、实例化Image对象，添加src为需要预加载的图片路径

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {
        //接下来可以使用图片了
        //do something here
    }
    else {
        img.onload = function() {
            //接下来可以使用图片了
            //do something here
        };
    }
}

起初试用了这种方法，但是发现vue里并不能跑进img.complete这个分支里，这是因为用webpack打包之后，在文件名后面会多一串hash值，导致找不到这个图片。需要将 img.src = url改成
img.src= require(’…/assets/img/[email protected]’)这样。
2、多图片预加载

    preload(){
          let count = 0;
          let imgs;
      	   imgs = [
              //用require的方式添加图片地址，直接添加图片地址的话&#x