Question

我正在尝试ajax加载一些内容，然后用新下载的内容替换页面上的现有内容。问题是我需要为替换数据绑定load(handler(eventObject))事件。我需要在加载所有图像时触发。以下是我到目前为止的情况：

$("#mainContentHolder").live("load", function(){ 
   alert("images loaded!") 
});

$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);
    alert("content is loaded!");
});

我在内容加载时看到了提醒，但是在加载图片之前就发生了警报，并且图片加载时的警报从未发生过（我之前也尝试过bind()而不是live()）。有谁知道解决这个问题？

Answer 1

这可能是您的问题，也可能不是您的问题，但是当您加载ajax内容时，您的图像加载功能附加的容器似乎正在被替换：

$("#mainContentHolder").live("load", function(){ //you are attaching to current and future '#mainContentHolder' elements
   alert("images loaded!") 
});

$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);  //'#mainContentHolder' element is replaced with something else
    alert("content is loaded!");
});

不确定您的AJAX调用会返回哪些内容，但如果它没有#mainContentHolder元素，则您的图像加载事件处理程序将无法附加到其中。

如果不是这样的话，还有这一点:(来自http://api.jquery.com/load-event/）

如果从浏览器缓存加载图像，则可能无法触发加载事件。为了解释这种可能性，我们可以使用特殊的加载事件，如果图像准备就会立即触发。 event.special.load是currently available as a plugin。

希望其中一个会帮助你。

Answer 2

是否可以将$ .get放入实时加载函数？

$("#mainContentHolder").live("load", function(){ 
   alert("images loaded!");
$.get("content.htm", function(data){
    $("#mainContentHolder").replaceWith(data);
    alert("content is loaded!");
});
});

replaceWith之后的jQuery load-event

2 个答案: