0
$(document).ready(function () {
        $(".box2").load("page1.html");
    });
    $(".box2").ready(function () {
        $(".box3").load("page1.html");
    });

That's my code, I've got a few boxes all with an image and I want it so when image 1 ( page1.html) is loaded, only then the next one must load and not before the first one is loaded.

user3319187
  • 5
  • 1
  • 3

2 Answers2

0

You can set a on complete handler for the load call. You can chain the next call within that function

Example: 

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

For your situation:

$(document).ready(function () {
   $(".box2").load("page1.html", function () {
      $(".box3").load("page1.html");
    });
});
Teddy
  • 4,009
  • 2
  • 33
  • 55
  • This works for the loading part but it doesn't go asynchronously. Correct me if I'm wrong – user3319187 Feb 24 '14 at 12:24
  • The images still load exactly at the same time at the same speed. – user3319187 Feb 24 '14 at 12:25
  • Even in normal HTML, img tags result in separate asynchronous calls to download and display the image. This means there are actually more asynchronous calls apart from the ajax calls. In other words: If your Page1.html contains an img tag there is no control on when that image request is completed. You can leave out ajax load() function and use two image tags instead. Wait for img1 to load and in the onload function change the src of the next image tag. Onload function can be assigned like this.. img1.onload=function(){}; – Teddy Feb 24 '14 at 17:50
  • Img tags are themselves asynchronous. You can just use onload function to wait for loading. – Teddy Feb 24 '14 at 17:55
0

For sequentially loading multiple images, try these two questions:

JavaScript waiting until an image is fully loaded before continuing script

Wait until image loads before performing function

Community
  • 1
  • 1
Teddy
  • 4,009
  • 2
  • 33
  • 55