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

等待图像加载到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()来实现,但是在

  • 问题内容: 我编写了一个脚本,该脚本从页面中获取数据,但是有时页面需要花费一些时间来加载,因此当将html拉到汤对象中时,有时它什么也不会拉,因为页面仍然需要完成。 我编写了以下代码以等待页面完成。 有用 但是调用函数时出现以下错误; 问题答案: 我认为您应该这样使用: 如手册所述。