Javascript 和 DOM 事件交互和可能的竞争条件答案

【问题标题】：Javascript and DOM event interaction and possible race conditionsJavascript 和 DOM 事件交互和可能的竞争条件
【发布时间】：2010-11-05 21:06:30
【问题描述】：

场景：预加载图片

执行 ajax 查询
显示加载屏幕
从 ajax 查询中检索结果
在 dom 中插入图片
等待图片完成加载
隐藏加载屏幕

我正在考虑执行以下操作：

function ajaxCallback(results) {
   /* snip insert into dom code */

   $(".waitForLoad").each(function() {
      imageLoadingCount++;
      $(this).load(imageLoaded);
   });
}

var imageLoadingCount = 0;
function imageLoaded() {
   imageLoadingCount--;
   if (imageLoadingCount == 0)
      HideLoadingScreen();
}

我不太确定浏览器 DOM 和 javascript 之间的交互。 DOM 在开始加载图像之前是否等待 javascript 完成执行？我担心可能的比赛条件。

【问题讨论】：

这是您的实际代码，还是只是一个示例。您是否有问题，即您是否真的遇到了竞争状况？
目前没有遇到问题，但希望避免可能出现的问题。

标签： javascript events dom conditional-statements race-condition

【解决方案1】：

您可以在 $.ready() 中安全地执行 ajaxCallback 并摆脱大多数问题。请注意，新创建的标签不会更新 DOM。

另请注意 - HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。

在许多情况下，如果您向用户展示加载屏幕超过一两秒，用户会感到恼火。等待图像加载并不是一个好主意。

【讨论】：

【解决方案2】：

加载事件观察器有点吓人，因为它只有在元素完全加载之前设置它才会起作用，如果你在之后设置它什么都不会发生。因此，这实际上取决于您何时调用 ajaxCallback()。我建议使用 onSuccess 而不是 onComplete。

另外，我想知道是否可以在 $(".waitForLoad") 本身上使用加载事件观察器？

【讨论】：

【解决方案3】：

Javascript 应该与加载并行运行，除非您使用 AJAX 请求的所有连接。浏览器在 javascript 运行时仍然正常运行，这首先是它背后的重点。

【讨论】：