等待图像类在 JavaScript 中加载

编程问答 2022-05-23

问题描述

我希望我的 JavaScript 代码在我创建和创建图像时暂停，等待它加载后再继续。我尝试编写此代码：

var width,height = "width","height"
img = new image()
image.onload = () => {width = this.width; height = this.height}
image.src = "https://cdn.discordapp.com/avatars/418893693106389024/aaed638ebdb3bfe2d4e1d3e7f9da62ef.png?size=256"
console.log(width,height)

但是，当我运行此代码时，width height 会打印到控制台。有没有办法在运行更多代码之前等待图像加载？如果是这样，请帮忙。谢谢。

解决方法

您可以使用 setTimeout() 方法并在执行之后的行之前等待所需的秒数。

,

在 onload 中放置您需要使用宽度/高度的任何内容，以便它仅在图像加载后运行：

const image = new Image()
image.onload = function () {  
  console.log(this.width,this.height)
}
image.src = "https://cdn.discordapp.com/avatars/418893693106389024/aaed638ebdb3bfe2d4e1d3e7f9da62ef.png?size=256"

,

首先，您的代码有很多未命中的匹配项。

根据语言约定，类设置为大写字母，因此 Image() 不是 image()

其次，当我们在事件侦听器中封装代码时，例如加载时，我们需要在该封装中执行所需的一切。

onload 函数的console.log out 端在全局级别处理，而不是发送到内存中以执行后者。所以把它移到加载函数中。

INNER JOIN

imageimageimagejavascriptwait