当前位置: 首页 > 面试题库 >

等待图像加载到JavaScript中

桂阳文
2023-03-14
问题内容

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

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

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

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

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


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

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




 类似资料:
  • 问题内容: 我正在尝试使用效果很好的jQuery执行Ajax调用。我使用成功事件来显示数据。但是,似乎在加载外部HTML文件后就触发了成功。如果图像较大,则显示后将继续加载。在所有内容完全加载后,是否可以显示内容?这是代码: 问题答案: @alex编写的插件由于某些原因对我不起作用…我不知道为什么。但是他的代码确实鼓舞了我想出一个对我有用的更轻量级的解决方案。它使用jQuery Promise。请

  • 我试图创建一个等待加载页面的方法,但我出现了一个错误。可能我没有正确使用这个方法。 错误是:

  • 问题内容: 我在下面编写的功能是否足以在当今大多数(如果不是全部)浏览器中预加载图像? 我有一个图像URL数组,可以循环访问这些URL,并为每个URL 调用该函数。 问题答案: 是。这应该适用于所有主要的浏览器。

  • 我的应用程序中有一个页面,它使用PrimeFaces DataTable来显示人员列表,其中第一列中每个人的小图像。当用户单击作为p:命令链接一部分的小图像时,我使用ajax在p:对话框中更新p: graph icImage,其中包含所选图像的路径,并使用命令链接的完整显示对话框。最后,我使用对话框的onShow将对话框居中。以下是xhtml: 上面的代码工作得很好,但对列表中的小图像和对话框中的

  • 问题内容: 我需要做的事情很简单,但是(对我来说)很难做到: 使用 javascript ,给定图像名称,即“ image01.jpg”,我需要检查该图像是否存在于某个文件夹或路径(本地或网络)中。如果该文件夹下不存在该图像,则需要检查另一个文件夹中是否存在同一图像。 例如,使用伪代码 您建议采用哪种方法?我尝试先使用ajax来实现此目的,然后使用javascript的Image()来实现,但是在

  • 我正在尝试将数据库调用移出控制器,以清理并使其可测试。当它们在控制器中时,一切都会顺利进行。我将它们移出控制器,并添加了一个异步,以确保我们等待。否则,我将调用的中的函数。现在,一旦我使用async/await,控制器中的函数就会认为没有用户,因为它没有等待。 有几个关于异步等待的SO问题,但我没有找到一个解决我的问题。我确实验证了返回了我的用户,并添加了控制台日志来显示路径。 节点猫鼬异步等待似