javascript - 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

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

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

Answer 2

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

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

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

Answer 3

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