What is the best way to use the jQuery load function synchronously.

I need to load an image but can't execute the next line of code until that image has loaded.

I could loop a variable until the load has completed but was wondering if there was a better way of doing that.

var img = jQuery('<img src="' + url + '"/>').load(function () {                 

            });  
  //Run code here once img load has comlpeted.                                              

What is the best way to use the jQuery load function synchronously.

I need to load an image but can't execute the next line of code until that image has loaded.

I could loop a variable until the load has completed but was wondering if there was a better way of doing that.

var img = jQuery('<img src="' + url + '"/>').load(function () {                 

            });  
  //Run code here once img load has comlpeted.                                              

• javascript
• jquery
• image
• asynchronous

• 1 This has what you need: stackoverflow.com/questions/5364166/… – tymeJV Commented Apr 12, 2013 at 15:30

6 Answers 6

You can also use CallBack function to get Synchronous Behaviour -

var result = $('#main-container').load( 'html/Welcomeform.html', 
                function () {
                     if($("textarea").find("#mail-id")){
                        $("textarea#mail-id").val(email_id);
                     }
                     } );   

From what I know, the load event will always fire asynchronously, except if the image is already cached (in some browsers). The only reliable solution is to put the code in a callback like you did. However, to make sure the load handler will always be fired in all browsers, even if the image is cached, make sure to add the handler before setting the src property of the image.

var img = jQuery('<img src="' + url + '"/>').load(runner);  
function runner() {
    //run code here once image is loaded
}

I arrived here looking for a similar solution. From the reads, it is not possible with .load, you need to use an AJAX request, as the question comment points out.

In my case I need to load a html file and I have added a transition to change the content. The old content were showed before the new one after the transition even if I was showing the content inside the load callback.

var main = $("#main");
    main.load("about.html", displaySection);

function displaySection () {
   main.show('blind');
}

My workaround has been to run the transition that shows the loaded content inside a timeout function with a of 200 for the delay parameter.

var main = $("#main");
    main.load("about.html", displaySection);

function displaySection () {
    setTimeout(function() {
        main.show('blind');
    }, 200);
}

The problem could be if the connection is so slow that the new page takes more than 200 ms to load, but in this case I wonder the callback will be launched later on. I don't understand why is not working without the timeout that I feel quite ugly, but it solved my problem ... just in case any other has not given a thought on this possibility.

The callback function in load() will fire once the basic elements of the screen have been retrieved, (the actual html) but doesn't wait for images to finish, you can use this to make it wait.

$('#holder').load(function() { 
var imgcount = $('#holder img').length; 
$('#holder img').load(function(){ 
imgcount--; 
if (imgcount == 0) { 
/* now they're all loaded, let's display them! */ 
} 
}); 
});

So this can be managed with a promise. As you probably know you can use the await operator to wait (as the name says) for a promise to be solved. So, we can transform the load() method into a promise

async function loadAsPromise(element, src) {
    var resolveFunction;
    const loadPromise = new Promise(function(resolve, _) {
        resolveFunction = resolve;
    });

    $(element).load(src, function () {
        console.log("SOLVED");
        resolveFunction();
    });

    return loadPromise;
}

So you can use your function like this:

await loadAsPromise(element, 'fileName');

// your other code

So yor 'other code' will only be executed when the promise is solved, and that happens when the load is complete. I hope you find this helpful!.

For some more info on how you solve a promise you can check this (where i got the idea):

Resolve Javascript Promise outside the Promise constructor scope