检测何时通过 ajax 加载资源

Posted 2023-05-09

【中文标题】检测何时通过 ajax 加载资源

【英文标题】：Detect when resources loaded via ajax

【发布时间】：2010-10-29 04:58:37

【问题描述】：

我最近询问如何检测页面的所有资源（例如图像和样式表）何时已加载。答案回来了，使用 $(window).load(); jQuery中的方法。

我现在的问题是如何检测何时通过 AJAX 加载内容。 AJAX 将一些 img 元素注入到 DOM 中……我如何知道这些图像何时完成加载？

【参考方案1】：

在$.get() 或$.post() 函数中，您可以提供将在ajax 请求完成时调用的函数的名称。例如：

$.get("something.php",data:'test',foo);

function foo()

   // This function will be called when the request has completed

或者：

$.get("something.php",data:'test',function()
  
    //This function will be called in the same way
  

);

【讨论】：

我不需要知道 AJAX 请求什么时候完成，因为 AJAX 请求会返回 html，然后浏览器会去取图片。

我可能是错的，但如果你知道预期图像的高度和宽度（也许它可以在服务器返回的 html/JSON 中返回），在回调函数中你可以做一个while 循环检查 $("#img").attr("height") 等是否与预期高度匹配。当它发生时，这可能意味着图像已完全加载。

不幸的是，这不够动态，因为这是可以进入任何大小的用户内容...

有内置的PHP函数可以返回图像的高度和宽度。您可以使用它们来获取高度和宽度，并将其与 URL 一起提供给 JSON 数组中的图像（查看 php.net/json_encode）。我敢肯定其他语言中也有这样的功能。

我不知道 Firebug 是否可以做到这一点，但可能是因为 firebug 是一个 firefox 扩展，它可以获得比普通 javascript 更多的关于浏览器窗口的信息。您是否尝试过我将图像的高度和宽度从 PHP 传递给 JS 的其他解决方案（在 PHP 中使用 getimagesize()），然后在 JS 中执行 while() 循环来比较 $("#img ") vs PHP 返回的高度/宽度？​​

【参考方案2】：

如果您正在调用 $.ajax，您可以设置一个成功请求的回调函数：

$.ajax(
    url: _url,
    type: _type,
    data: _data,
    dataType: _dataType,
    success: _success
)

var _success = function(result) 
    $html = $(result);
    alert('HTML downloaded');

    // inject HTML into DOM here

您需要通过 $html 来获取图像元素，并为每个图像注册加载函数回调，该回调会在图像加载时触发：

$('#myImage').load(function()   
    alert('Image Loaded');  
);

【讨论】：

图片不会在AJAX调用后立即加载.. DOM将被更新，然后将获取资源。

啊，我明白了。我已经稍微更新了答案，这应该会让你走上正轨。

我会尝试使用这个函数来匹配图片数量和加载的图片数量，谢谢...

【参考方案3】：

检测 ajax 获取的时间很容易：使用 jQuery 中定义的 Ajax 事件：http://docs.jquery.com/Ajax

但我不确定你问的是同样的事情。要检测图像何时完成加载（假设这将等于图像的 src 属性更改时的事件），您可以使用突变事件。 http://wiki.github.com/jollytoad/jquery.mutation-events 干杯，

jrh.

【讨论】：

图像 src 将始终设置为资源...当资源被获取时它不会改变。