Javascript 如何确保使用jquery在ajax中加载所有内容

大家好，当我使用jquery将一些内容加载到我的页面时，我被困住了。 代码如下所示：

$("#holder").fadeout();
$("#holder").load("test.html", callbackfn);

function callbackfn(){
    $("#holder").fadein();
}

test.html

<div style="background-image:url(1.jpg);">test</div>

测试

这是主要的想法，实际上它工作得很好，只是#holder在图片完全加载之前已褪色。

---

如何确保在显示#holder之前test.html中的所有内容都已完全加载？

图像已加载到它们自己的请求中。因此，即使您是通过ajax加载图像，一旦它们被放入DOM中，它们也会执行自己的请求来获取图像。您有权访问IMG上的onload事件。因此，您需要知道需要多少图像，然后以某种方式跟踪哪些图像是完整的，然后执行fadein。

如果您有许多图像，这将有点棘手。由于您没有提供test.html，我的最佳猜测是

$("#holder").load("test.html", cbLoaded);

function cbLoaded(){
  var onLoadCount = $("img","#holder").length;
  var count = 0;
  $("img","#holder").bind("load",function(){
    count++;
    if( count === onLoadCount ){
      //Everything loaded!
    }
  });
};

---

这将适用于>=1个图像，如果您有一个图像，只需使用绑定（“加载”）并忘记计数业务。

[由[Jason Bunting在本评论中撰写]（）]仅供参考：根据W3C规范，onload对于IMG元素不是有效的事件。很明显，浏览器确实支持它，但是如果您关心规范，并且不是100%确定所有您想要针对的浏览器都支持它，那么您可能需要重新考虑它，或者至少记住它。--------[MDC onload ref]（）-注意它是如何声明

onload

是just

window

的属性的。这是个好主意，但是如果图片是背景图像呢？（测试）没有骰子，我不知道如何检查背景图像。如果我发现有用的东西，我会到处寻找并发布。