新内容加载后，jquery .load()和触发函数?就像JavaScript onload事件一样 [英] jquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event

问题描述

使用jquery，我正在使用jquery的.load()函数交换网页中的某些内容.我想在内容实际加载后立即触发事件 ，但是不在之前和不在之后.我正在寻求任何优美的解决方案！为什么?在这种情况下，我正在使用旧的淡出，交换内容，淡入"方法.我的问题?我想在加载新内容后尽快消失.

Using jquery, I am swapping some content in a web page by use of jquery's .load() function. I want to trigger an event immediately once the content has actually been loaded, but not before and not after. I'm up for any graceful solution! Why? In this instance, I'm doing the old "fade out, swap content, fade in" approach. My problem? I want to fade back in AS SOON AS the new content is loaded.

注意事项:

• 在.load()函数成功执行之前(在实际加载内容之前)，像$('#object').load(url, callback)中那样使用回调函数会触发.这里没用.
• 使用定时延迟来淡入不是 的合适解决方案.非常笨拙"，特别是对于那些具有较快Internet连接的用户.
• JavaScript的onload事件触发器不起作用，因为.load()所更改的元素已经加载到HTML DOM中.
• jquery的.ready()函数也不起作用，因为实际的元素已经加载.
• 我不想创建onload或.ready()子容器元素，因为这是我实际上正在尝试的解决方法，尽管它可能很优雅，也可能更多.

• Using a callback function as in $('#object').load(url, callback) triggers as soon as .load() function successfully executes (before the content is actually loaded). Useless here.
• Using a timed delay for fading back in is not a graceful solution. Very "clunky", especially for those with faster Internet connectivity.
• JavaScript's onload event trigger does not work, as the element that .load() is altering has already loaded into the HTML DOM.
• jquery's .ready() function also does not work, as the actual element is already loaded.
• I do not want to create an onload or .ready() sub-container element, because that's a workaround for what I'm actually trying, though it might be as graceful or more.

当新的.load()内容最终被加载时(以及仅当时)，如何才能触发函数，就像JavaScript的onload事件一样?非常感谢.

How can I fire a function when (and only when) the new .load() content is finally loaded, just like JavaScript's onload event does? Thanks much.

编辑事实证明，jquery .load()函数可以正常工作，而我正在解决此错误.

EDIT As it turns out, the jquery .load() function is working flawlessly, and I'm approaching this wrong.

• .load()函数成功完成后，它将调用任何"回调"函数就像其他所有接受回调作为其参数"之一的jquery函数一样，由程序员提供.
• .load()函数一旦出错或成功开始HTML替换并加载新内容后，即完成 ，但这就是IT！然后，内容将花费很长时间才能加载，但是您的.load调用在此之前已经完成.因此，期望回调在.load内容加载后 后运行，只会让您失望. ;)

• Once the .load() function completes successfully, it calls any "callback" function included by the programmer, just like any other jquery function that accepts a callback as one of its "arguments".
• The .load() function is complete once it either errors or successfully begins the HTML replacement and loading of new content, but that is IT! The content will then take however long it takes to load, but your .load call is already complete before that. Therefore, expecting the callback to run after the .load content has loaded will only disappoint you. ;)

我希望其他人也可以像我一样从中学习，包括那些认为我的想法是正确的人.证明:如 jquery ajax .load页面中所述，回调是在请求时执行的完成，而 load 完成时不是.尤里卡.哎呀/EDIT

I hope others can learn from this just as I did, including those who thought what I thought was the case. Proof: as stated in the jquery ajax .load page, the callback is executed when the request completes, not when the load completes. Eureka. Whoops. /EDIT

推荐答案

阅读的jQuery文档页面时jQuery.get()和 jQuery.load()，回调参数引用为以下:

Upon reading the jQuery docs pages for jQuery.get() and jQuery.load(), the callback argument is quoted as the following:

如果请求成功，将执行的回调函数."

"A callback function that is executed if the request succeeds."

让我强调一下请求"和成功"这两个术语.该请求可能会成功，但这不是 表示内容已被加载.与.load()相同的问题-函数不是按照我的想法构建的.

Let me stress the terms "request" and "succeeds". The request may succeed, but that does not mean that the content is loaded. Same problem as .load() — the functions aren't built the way I was thinking.

如果要在新内容最终加载后触发事件，则需要采用其他方法.

If I want to trigger an event once the new content finally loads, I'll need to take a different approach.

• 我可以使用JS onload事件，并通过完全替换HTML元素(使替换的代码包含onload属性)来触发它.请注意，使用HTML iframe元素非常糟糕，原始且笨拙".我只需要找到一种更好的方法，即可在加载新内容后立即触发功能.
• 此外，我可以使用jQuery来检查新内容的.ready()状态，但是(据我所知，"AFAIK"/据我所知)仅在所检查的内容为 new HTML元素，不是其内部内容已更改的预先存在的HTML元素.即使加载了新内容，任何现有元素的jQuery .ready()状态(AFAIK)都将显示为就绪".也许我对此有误，如果是的话，我希望得到纠正.

• I could use the JS onload event, and trigger it by completely replacing an HTML element (having the replaced code contain an onload property). Note that using HTML iframe elements is pretty awful, primitive, and "clunky". I just need to find a better way to trigger a function as soon as loading the new content finishes.
• Also, I could use jQuery to check the .ready() state of new content, but ("AFAIK" / as far as I know) that will only work if the checked content is a new HTML element, not a preexisting HTML element whose interior content is changed. The jQuery .ready() status of any preexisting element will (AFAIK) already be shown as "ready" despite if new content is loading. Perhaps I am wrong about this, and I would like to be corrected if so.

除非另行通知，否则此答案将被标记为正确答案.最初的问题被误认为我只需要.load().干杯！

Unless otherwise notified, this answer will be marked as the correct one. The original question was mistaken that .load() was all I needed. Cheers!

这篇关于新内容加载后，jquery .load()和触发函数?就像JavaScript onload事件一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！