javascript - 一旦图像可用就动态加载图像

Question

好的，情况是这样的。我有一个网站，用户可以在其中创建新闻提要故事。该故事向服务发送请求，该服务拍摄照片并将其保存到 S3。在将图片保存到 S3 之前，用户会看到他们的新闻提要故事是用损坏的图像链接创建的。

是否有可能知道该图像何时保存到 S3，然后仅更新 UI 以显示当前显示的图像，而无需用户刷新页面，或者无需不断发送请求来检查图像是否可用？

Answer 1

是的，你有很多方法可以做到这一点，你可以使用 Promises 来存档，Promises 让你运行异步代码。当你向服务器请求图像时你仍然没有它来显示它，你需要一些时间，你可以做这样的事情(我不知道你用什么来到达服务器但我给你一个 axios 的例子:

因为 axios 通过 defa 返回一个 promise

function reachServer() {
  return axios.get('url');
}

function loadImage() {
  Promise.resolve(reachServer())
    .then((image) => {
      //got the image
      myImage = image;
    })
    .catch(() => {
     // a error ocurred loading
    })
}

这是一个关于如何归档的简单案例，你还有很多其他案例，你可以使用 image.onload，或者 ES6 的 async/await，我认为 Promises 和 async/await 是最好的选择。

希望对你有帮助