html5preloader, how to load image?

Question

I am currently using the html5preloader js library to preload audio files.

It looks smth like:

myLoader = new html5Preloader();
myLoader.addFiles('mysound*:sound.ogg||sound.mp3');
...
myLoader.getFile('mysound').play()

But what if I load a png with addFiles('foo*:foo.png'), how do I set an img element to point to that one then?

Answer 1

Similarly to the audio files being loaded as audio elements, the image files will be loaded as img elements, hence you will be able to do, for example, the following:

document.body.appendChild(myLoader.getFile('foo'));

Or you if you're altering markup, you should just refer to the same URL as you are in the loading instructions.

Alternatively, you may need the image on multiple occasions, so to avoid the warm cache check delay, you'll probably want to use myLoader.getFile('foo').cloneNode() .

You can draw the images on the canvas as well, as follows:

context.drawImage(myLoader.getFile('foo'), x, y);

I hope this helps.