Question

大家好，当我使用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中的所有内容都已完全加载？

Answer 1

图像是按照自己的请求加载的。因此，即使您通过ajax加载图像，一旦将它们放入DOM中，它们就会执行自己的请求来获取图像。您可以在IMG上访问一个onload事件。因此，您需要知道您期望的图像数量，然后以某种方式跟踪哪些图像是完整的，然后执行您的淡化。

Answer 2

如果您有许多图像，这将有点棘手。我最好的猜测，因为你没有提供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!
    }
  });
};

这将适用于＆gt; = 1张图片，如果你有一张图片只使用bind（“加载”）并忘记计数业务。

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

2 个答案: