Javascript和DOM事件交互以及可能的竞争条件

Question

场景：预加载图片

1. 执行ajax查询
2. 显示加载屏幕
3. 从ajax查询中检索结果
4. 将图像插入dom
5. 等待图片完成加载
6. 隐藏加载屏幕

我正在考虑做以下事情：

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完成执行？我担心可能的竞争条件。

Answer 1

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

Answer 2

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

另外，我想知道是否可以在$（“。waitForLoad”）本身上使用load事件观察器？

Answer 3

您可以安全地在$ .ready（）中执行ajaxCallback并解决大多数问题。请注意，不会为新创建的标记更新DOM。

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

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