如何知道ajax加载的内容何时完成图像加载？

I'm loading html from an ajax request, and some img tags in it.

我正在从ajax请求加载html,并在其中加入一些img标签。

I need to know when the images loaded in the ajax are fully loaded to resize the container. I don't know how many images are in the result, so I can't simply check the .complete value.

我需要知道ajax中加载的图像何时完全加载以调整容器的大小。我不知道结果中有多少图像,所以我不能简单地检查.complete值。

Do you know a solution for this?

你知道解决方案吗?

Thank you!

Leandro

3 个解决方案

#1

If you're using jQuery, the $(window).load() command can set up a function to be called once all the images are loaded, as follows:

如果你正在使用jQuery,$(window).load()命令可以设置一个函数在加载所有图像后调用,如下所示:

$(window).load(
    function() {
        // weave your magic here.
    }
);

If you're not using jQuery, I'd just do what I've done when I want a little bit of its functionality: download it and examine the source to see how it does it. Then do that :-)

如果你不使用jQuery,我只需要做我想做的一些功能:下载它并检查源代码以了解它是如何做到的。然后这样做:-)

#2

XMLHTTPrequests have properties that you can use to determine when the load has completed. If you are using javascript directly, you would need to assign a function to the onreadystatechange event. This is called each time that the state changes. The states are stored in ReadyState and are: 0 Uninitiated 1 Loading 2 Loaded 3 Interactive 4 Complete

XMLHTTPrequests具有可用于确定加载何时完成的属性。如果您直接使用javascript,则需要为onreadystatechange事件分配一个函数。每次状态改变时都会调用此方法。状态存储在ReadyState中,并且是:0 Uninitiated 1 Loading 2 Loaded 3 Interactive 4 Complete

In your function you check that the status is 4 and call the other required functions

在您的功能中,您检查状态是否为4并调用其他所需功能

JQuery has events that tell you when certain things have occurred. View the AJAX Documentation

JQuery有事件告诉你何时发生了某些事情。查看AJAX文档

#3

Ok, thanks to Pax, I've found the solution.

好的,多亏了Pax,我找到了解决方案。

On the success event of the ajax request (using jQuery), I've added the following code:

在ajax请求的成功事件(使用jQuery)上,我添加了以下代码:


$('img', this).load(function() {
    resize_element(this);
});

Thanks both of you!

谢谢你们俩!

#1