3

使用 jquery，我正在使用 jquery 的功能交换网页中的一些内容.load()。我想在内容实际加载后立即触发一个事件，但不是 before和after。我准备好任何优雅的解决方案！为什么？在这种情况下，我正在使用旧的“淡出、交换内容、淡入”方法。我的问题？我想在新内容加载后立即淡出。

注意事项：

  • $('#object').load(url, callback)只要.load()函数成功执行（在实际加载内容之前） ，就使用回调函数作为触发器。在这里没用。
  • 使用定时延迟淡入不是一个优雅的解决方案。非常“笨拙”，尤其是对于那些互联网连接速度更快的人。
  • JavaScript 的onload事件触发器不起作用，因为.load()正在更改的元素已经加载到 HTML DOM 中。
  • jquery 的.ready()功能也不起作用，因为实际元素已经加载。
  • 我不想创建一个onload或.ready()子容器元素，因为这是我实际尝试的一种解决方法，尽管它可能同样优雅或更多。

当（且仅当）新内容最终加载时，我如何才能触发函数.load()，就像 JavaScript 的onload事件一样？非常感谢。

编辑事实证明，jquery.load()函数工作完美，我正在接近这个错误。

  • 一旦.load()函数成功完成，它就会调用程序员包含的任何“回调”函数，就像任何其他接受回调作为其“参数”之一的 jquery 函数一样。
  • 一旦出错或成功开始 HTML 替换和加载新内容，该.load()功能就完成了，但就是这样！然后，无论加载内容需要多长时间，但您的.load通话在此之前已经完成。因此，期望回调在内容加载后.load运行只会让您失望。;)

我希望其他人可以像我一样从中吸取教训，包括那些认为我认为是这样的人。证明：如jquery ajax .load page中所述，回调在请求完成时执行，而不是在加载完成时执行。尤里卡。哎呀。/编辑

4

3 回答 3

1

尝试使用不同的方法，而不是load()，我建议使用get(). 像这样的东西可能对你更有用......

var jqxhr = jQuery.get(url,vars);

jqxhr.success(function(data){
    # This will only be called once the remote content has been loaded in
    # The data will then be stored in the data param and can be used within your site
});

jqxhr.error(function(data){
    # Something went wrong, never mind lets just handle it gracefully below...
});

我希望这是您的问题的解决方案！

有关更多信息，请参阅http://api.jquery.com/jQuery.get/

我已经在下面快速创建了这个功能，它可能对你有帮助......它没有完善！

jQuery.fn.loadNewData = function() {

    var object = jQuery(this);
    var jqxhr = jQuery.get(arguments[0]);

    // check for success
    jqxhr.success(function(data) {
        // load the data in
        object.html(data);
    });

    jqxhr.error(function(){
        alert('Failed to load data');
    });
}

使用它，您可以调用与调用 load() 函数的方式相似的方式。

jQuery('#object').loadNewData(url);
于 2012-07-20T23:56:46.543 回答
0

我想你可能会误解你所看到的。根据您使用的浏览器，如果您在回调中弹出警报，您将不会在浏览器中看到新元素，因为它不会重新呈现 DOM，直到您将控制权交还给浏览器。这并不意味着您不能从 DOM 中获取新元素并开始淡入它们。使用以下 jsfiddle：http: //jsfiddle.net/ttb55/8/在 Chrome 中它会在第二个 div 时显示第一个 div警报启动，然后淡入第二个 div。在 IE 中，当第二个警报出现时，它不会显示第一个 div，这是我认为您在回调期间加载后所处的状态，但是一旦您点击 ok，它仍然可以工作，因为一切都在 DOM 中。

于 2012-07-23T17:02:55.853 回答
0

在阅读jQuery.get()和jQuery.load()的 jQuery 文档页面后，回调参数引用如下：

“请求成功时执行的回调函数。”

让我强调“请求”和“成功”这两个术语。请求可能成功，但这并不意味着内容已加载。同样的问题.load()- 函数不是按照我的想法构建的。

如果我想在新内容最终加载后触发一个事件，我需要采取不同的方法。

  • 我可以使用 JSonload事件，并通过完全替换 HTML 元素来触发它（让替换的代码包含一个onload属性）。编辑：请注意，使用 HTMLiframe元素非常糟糕、原始且“笨拙”。我只需要找到一种更好的方法来在加载新内容完成后立即触发功能。
  • 此外，我可以使用 jQuery 来检查.ready()新内容的状态，但是（“AFAIK”/据我所知）只有在检查的内容是新的HTML 元素而不是内部内容已更改的预先存在的 HTML 元素时才有效. 无论是否正在加载新内容，任何预先存在的元素的 jQuery.ready()状态（AFAIK）都已经显示为“就绪”。也许我对此有误，如果是这样，我希望得到纠正。

除非另有通知，否则此答案将被标记为正确答案。最初的问题是错误的，这.load()就是我所需要的。干杯!

于 2012-07-23T19:20:32.807 回答