Asynchronous loading images

Question

$(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.

Answer 1

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

Answer 2

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