Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wait for image to be loaded before going on

I'm developing a game using JavaScript and canvas. As the game loads, all images that will be used are being cached.

Observing the resource timeline, I see that the following code triggers an asynchronous request:

var sprite = new Image(); sprite.src = "sprites/sheet1.png"; 

The engine will keep executing, eventually beginning to draw and play the level. Images that are loaded after the first frame is painted might never appear due to clipping (i.e. not getting "dirty").

So I tested the following:

console.log("begin"); var sprite = new Image(); sprite.onload = function() { console.log('loaded!'); }; sprite.src = "sprites/sheet1.png"; console.log("end"); 

The resulting console outputs in the order they occur are:

  • begin
  • end
  • loaded!

I'm looking for a similar way to $.ajax with async: false to perform the loading. Can't figure out how... thanks in advance for you help! J.

like image 295
Jem Avatar asked Dec 27 '11 13:12

Jem


People also ask

What is image loaded?

The image is considered completely loaded if any of the following are true: Neither the src nor the srcset attribute is specified. The srcset attribute is absent and the src attribute, while specified, is the empty string ( "" ). The image resource has been fully fetched and has been queued for rendering/compositing.

How can you tell if an image is loaded?

To determine whether an image has been completely loaded, you can use the HTMLImageElement interface's complete attribute. It returns true if the image has completely loaded and false otherwise. We can use this with naturalWidth or naturalHeight properties, which would return 0 when the image failed to load.

Why does my website load images first?

As long as the "loading..." image is positioned before any other html elements, it should load first. This of course depends on the size of the image. You could put the loading div right after the tag and position it using 'position:absolute'.

What is load image event?

The load event is fired when the document has been fully processed. When images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire.


1 Answers

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('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/

like image 66
ThiefMaster Avatar answered Sep 19 '22 12:09

ThiefMaster