Sequentially Load DIV using Jquery

Question

Is it possible to load a series of DIVS using Jquery using a preloader.

For instance, I have a page with 4 divs nested within 1 main div.

I'd like to load content1, then content2, and so on.

Plus, only 1 div will load at a time in the sequence.

Is this possible with jquery, or anything else?

Answer 1

Yes, use jQuery.load();, begin with Content1 and trigger the loading of Content2 on the complete callback from .load();.

Example:

$("#Div1").load("ajax/Content1.php", function() {
  $("#Div2").load("ajax/Content2.php", function() {
    //(And so on...)
  });
});

Edit: I just assumed by "load" you meant loading dynamic (like PHP which your post is tagged with) content through ajax.

Answer 2

Yes. Just when you set up the load command for each, put a delay command to time them so they happen in sequence. So, if you have for divs with the ids div-1, div-2, div-3, and div-4:

jQuery("#div-1").fadeIn(3000)
jQuery("#div-2").delay(3000).fadeIn(3000)
jQuery("#div-3").delay(6000).fadeIn(3000)
jQuery("#div-4").delay(9000).fadeIn(3000)