一尘不染

等待图像加载到JavaScript中

javascript

我正在进行Ajax调用,该调用返回了一些信息,包括图像路径。

我在HTML中准备了所有这些信息,这些信息将作为一种弹出窗口显示。我只是将pop div的可见性从隐藏切换为可见。

要设置弹出div的位置,我必须根据图像的高度进行计算。因此,在设置位置并将可见性切换为可见之前,我必须等待图像加载知道其尺寸。

我尝试了递归,setTimeout,完整的img属性,while循环等技巧,但没有成功。

那么,我该怎么做呢?也许我应该在Ajax调用中返回尺寸。


阅读 278

收藏
2020-05-01

共1个答案

一尘不染

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

请注意,按照上面的顺序进行操作很重要: 首先 附加处理程序, 然后
设置src。如果以相反的方式进行操作,并且图像在缓存中,则可能会错过该事件。JavaScript在浏览器中的单线程上运行(除非您使用的是Web
Worker),但是 浏览器
不是单线程的。对于浏览器来说,查看src,确定资源可用,加载资源,触发事件,查看元素以查看是否有任何需要排队等待回调的处理程序,不查看任何内容并完成事件是完全有效的处理之间src行和附加处理程序的行。(如果在行之间进行了回调,则回调不会发生,它们将在队列中等待,但是如果没有回调,则不需要等待事件。)

2020-05-01