1

If you make a new image and define is source do you need to preload? For example:

var image = new Image();
image.src = 'data:image/jpeg;base64,/9j/4Q+sRXhpZgAATU0AKgAAAAgABw...';
// Append image to canvas.

I've been doing some tests but I'd rather rather have reliable evidence, so links would be nice.

Thanks

lededje
  • 1,859
  • 1
  • 16
  • 25

1 Answers1

2

EDIT: Actually I may have been wrong apparently different browsers behave differently in this respect and although the image is available information such as it's width and height aren't necessarily. I assume this is because the browser functions that calculate this information are non-blocking and assume you are listening to onload.

So yes listen to the onload event to ensure that a dynamic image has been loaded by the users browser before attempting to use it.

Based on information from: Should setting an image src to data URL be available immediately?

Ignore the following advice (it remains to provide context to my answer):

By storing it as a variable you are in a way preloading it. All that happens when you preload an image is it's data is retrieved and stored. You have already stored it's data in a variable - what is there to preload?

Because variable assignment is synchronous the image will be available to your code that follows.

The whole point of preloading is the fact that an image is usually at a different location on the server and that loading of separate files is often asynchronous thus you ensure that your script waits for the image to be downloaded. By creating your image inline you are effectively storing it in the JavaScript file and it will be downloaded at the same time.

Community
  • 1
  • 1
George Reith
  • 13,132
  • 18
  • 79
  • 148
  • I know you don't have to download it; the data is ineffect inline, but does that mean I don't need to wrap the image in an onload event? – lededje May 18 '13 at 12:51
  • @lededje I would of said yes but then I read this... http://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-data-url-be-available-immediately which suggests you should as different browsers have different results. – George Reith May 18 '13 at 13:10