BOTJr. BOTJr. - 4 months ago 10
jQuery Question

How to make jQuery load starts when the other load(s) finishes?

I am new to jQuery so I don't know much about it, however I read about the .load() function which makes an ajax connection and shows the result of the page to the specific html element. What I was trying to do was that load three different div on the same page.

Example:

$("#abc1").load("result1.php",{"name:"namex});
$("#abc2").load("result2.php",{"name:"namey});
$("#abc3").load("result3.php",{"name:"namey});


Is there any way to make sure that the other .load() function only run when the first one has loaded and so on?

Answer

You can use a callback.

$( "#abc1" ).load( "result1.php", {"name:"namex}, function() {
    alert( "Load 1 was performed." );
    $( "#abc2" ).load( "result2.php", {"name:"namey}, function() {
        alert( "Load 2 was performed." );
    });
});