How can I check if an ajax .load call has loaded

Question

Consider the following code:

var loadingHTML = $("<div style='width:100%;'> <h1>Loading...</h1></div>");
loadingHTML.hide();
$(".row").append(loadingHTML);
loadingHTML.fadeIn('slow');
$(".row").append($("<div>").load("get-more-images.php?start=36&end=36"));
//  loadingHTML.hide();

I have a page of images, and will fire this when the user scrolls down the page to load more images as they scroll down. The hope is to display "Loading.." until the image have appeared, then hide it again, running the above code will show then hide the text so fast you cannot see it, is there a way to check wether the .load event has finished?

Answer 1

Give the load a callback and execute whatever you want.

$(".row").append($("<div>").load("get-more-images.php?start=36&end=36", function () {
    console.log('load complete');
}));

More info - http://api.jquery.com/load/

Answer 2

You can use a callback function:

var loadingHTML = $("<div style='width:100%;'> <h1>Loading...</h1></div>");
loadingHTML.hide();
$(".row").append(loadingHTML);
loadingHTML.fadeIn('slow');
$(".row").append($("<div>").load("get-more-images.php?start=36&end=36"), function() {
  console.log("images load");
});

In docs you can check parameters it takes:

.load( url [, data ] [, complete ] )

• url Type: String A string containing the URL to which the request is sent.

• data Type: PlainObject or String A plain object or string that is sent to the server with the request. complete Type:

• Function ( String responseText, String textStatus, jqXHR jqXHR ) A callback function that is executed when the request completes.

References

.load()