如何确保使用jQuery将所有内容加载到ajax中

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!
    }
  });
};

这将适用于> = 1张图片，如果您只有一张图片，则只需使用bind（“ load”）并忘记点票业务。