Question

Hello everyone I got trapped when Im using jquery loading some content into my page.
The code is like this:

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

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

test.html

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

That’s the main idea, and actually it works quiet fine except that #holder is faded in before pictures are fully loaded.
How can I make sure everything in test.html is fully loaded before #holder is displayed?

Answer 1

This would be a bit tricky, if you have many images. My best guess, since you didn’t provide test.html, is this.

$("#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!
    }
  });
};

This will work with >=1 images, if you have one image just use the bind(“load”) and forget the counting business.