Wait for image to be loaded before going on

by

You shouldn’t make anything synchronous (not even AJAX) calls but instead simply put your code in the appropriate callback:

function loadSprite(src, callback) {
    var sprite = new Image();
    sprite.onload = callback;
    sprite.src = src;
}

Then use it like this:

loadSprite("https://stackoverflow.com/questions/8645143/sprites/sheet1.png", function() {
    // code to be executed later
});

If you want to pass additional arguments, you can do it like this:

sprite.onload = function() {
    callback(whatever, args, you, have);
};

If you want to load multiple elements and need to wait for all of them to finish, consider using the jQuery deferred object:

function loadSprite(src) {
    var deferred = $.Deferred();
    var sprite = new Image();
    sprite.onload = function() {
        deferred.resolve();
    };
    sprite.src = src;
    return deferred.promise();
}

In the function loading the sprites, you do something like this:

var loaders = [];
loaders.push(loadSprite('1.png'));
loaders.push(loadSprite('2.png'));
loaders.push(loadSprite('3.png'));
$.when.apply(null, loaders).done(function() {
    // callback when everything was loaded
});

http://api.jquery.com/jQuery.when/

More Related Contents:

  1. Resize image with javascript canvas (smoothly)
  2. Waiting for image to load in JavaScript
  3. Can I get image from canvas element and use it in img src tag?
  4. How do image preloaders work?
  5. Draw border around nontransparent part of image on canvas
  6. Load image from url and draw to HTML5 Canvas
  7. Image brightness detection in client side script
  8. How to cancel an image from loading
  9. Cancel single image request in html5 browsers
  10. canvas- Cropping images in different shapes
  11. How can I upload files asynchronously with jQuery?
  12. How To Save Canvas As An Image With canvas.toDataURL()?
  13. How should I call 3 functions in order to execute them one after the other?
  14. Simulation background-size: cover in canvas
  15. HTML5 Canvas to PNG File
  16. How do I load binary image data using Javascript and XMLHttpRequest?
  17. Cross-origin data in HTML5 canvas
  18. HTML5 canvas ctx.fillText won’t do line breaks?
  19. How can I stop the alpha-premultiplication with canvas imageData?
  20. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  21. Are JavaScript Promise asynchronous?
  22. Detect if user clicks inside a circle
  23. JavaScript: Know when an image is fully loaded
  24. How to convert image to byte array using javascript only to store image on sql server?
  25. jQuery ajax load() java script not executing?
  26. Is canvas getImageData method machine/browser dependent?
  27. Limit labels number on Chart.js line chart
  28. Summernote image upload
  29. Get image width and height from the Base64 code in JavaScript
  30. ASYNC / AWAIT SyntaxError: await is only valid in async functions and the top level bodies of modules

Leave a Comment