异步加载图片

1. 使用场景

在图片访问比较慢的情况，可以优先给图片设置灰色的等待加载图，等到图片加载完成，替换原来的灰色占位图片。达到图片未加载时结构不乱，拥有页面效果；

2. JS 实现

// 异步加载图片
export function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    image.src = url;

    image.onload = function() {
      resolve(image);  // 返回 img 对象
      resolve(url);  // 也可返回 url 地址
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };
  });
}

在需要异步加载图片的时候，引入。

import { loadImageAsync } from "地址"
const imgUrl = DefaultImg;
const dataImg = "图片请求地址";

loadImageAsync(dataImg).then(res => {
    imgUrl = res;  //赋值新的 url 
}).catch(err => {
    console.log(error);
})