是否有IE Render Complete事件？ [英] Is there an IE Render Complete event?

问题描述

在尝试确定页面为什么要加载20秒时，我在IE8中发现了一些奇怪的行为。

场景是这样的。

我做一个ajax调用，它返回，回调看起来像这样

  $（ #StoreDetailsContainer）HTML（$（tableHtml））; 
 var StoreDetailsTable = $（＃StoreDetailsTable）; 
 StoreDetailsTable.tablesorter（{sortList：[[0，0]]，cssChildRow：SubTable}）; 
 StoreDetailsTable.filtertable（{cssChildRow：SubTable}）; 
  

但是，这段代码需要20秒才能完成。

我正在搞乱，时间安排，并在方法之间弹出警报，突然间，只需要6秒钟。我玩了一点点，发现如果我在 .html（）调用之后引入延迟，并且在我尝试操纵DOM之前，页面显示的速度更快。现在看起来像这样

  $（＃StoreDetailsContainer）。html（$（tableHtml））; 
 window.setTimeout（function（）{
 var StoreDetailsTable = $（＃StoreDetailsTable）; 
 StoreDetailsTable.tablesorter（{sortList：[[0，0]]，cssChildRow：SubTable }）; 
 StoreDetailsTable.filtertable（{cssChildRow：SubTable}）; 
}，100）; 
  

尽管在进程中添加了额外的1/10秒，它也只需要6秒。 / p>

我的理论是，因为DOM没有被IE完全呈现在IE中，而是通过 .html（）在尝试使用它之前调用，有某种锁定发生。

有没有办法确定IE何时完成渲染添加到DOM的内容？ code> .html（）所以我不需要在 setTimeout 调用中使用任意值。

解决方案

您可以将一个像素图像添加到回调响应中，从.html（..）之后的DOM中获取该图像，并附加到其onload事件。我无法想象图像的onload事件是可能的，直到浏览器呈现为止。

确保图像在src中具有唯一的标识符，以便它没有缓存...

您遇到的奇怪问题 - 我相信有人会提供更优雅的解决方案：）

B

While trying to determine why a page was taking 20s to load, I found some odd behavior in IE8.

The scenario is this.

I make an ajax call, it returns and the callback looked something like this

$("#StoreDetailsContainer").html($(tableHtml));
var StoreDetailsTable = $("#StoreDetailsTable");
StoreDetailsTable.tablesorter({ sortList: [[0, 0]], cssChildRow: "SubTable" });
StoreDetailsTable.filtertable({ cssChildRow: "SubTable" });

However, this bit of code took 20s to complete.

I was messing around, timing things, and popping up alerts between methods, and suddenly, it took only 6s. I played around a little more to find that if I introduced a delay after the .html() call, and before I attempted to manipulate the DOM, the page rendered MUCH faster. It now looks like this

$("#StoreDetailsContainer").html($(tableHtml));
window.setTimeout(function() {
    var StoreDetailsTable = $("#StoreDetailsTable");
    StoreDetailsTable.tablesorter({ sortList: [[0, 0]], cssChildRow: "SubTable" });
    StoreDetailsTable.filtertable({ cssChildRow: "SubTable" });
}, 100);

It also only takes 6s despite having an extra 1/10th of a second added to the process.

My theory is that because the DOM wasn't fully rendered to the screen by IE by the .html() call before attempting to work with it, there is some kind of locking happening.

Is there a way to determine when IE has finished rendering what was added to the DOM by .html() so I don't need to use an arbitrary value in a setTimeout call?

解决方案

You could add a single pixel image to your callback response, get that image from the DOM after .html(..) and attach to its onload event. I can't imagine it's possible for the image's onload event to fire until the browser has rendered it.

Make sure the image has a unique identifier in the src so that it doesn't get cached...

Odd problem you're having though - I'm sure someone will offer a more graceful solution :)

B

这篇关于是否有IE Render Complete事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！