(Pre)loading Assets

[sima]

I'm looking for the best way to ensure, that all required assets (images and audio) are ready to use, before I allow people to play.

 

I've tested several things, but they don't work reliably:
First try, DOM-preloading:

I created an empty <div> and filled it with assets:

<div id='id_memory' style='visibility: hidden;'></div>

// images:var preload_this = g_preload_image.pop();document.getElementById("id_memory").innerHTML += "<img height=1 width=1 src='"+preload_this+"'>";// audio:var preload_this_audio = g_preload_sound.pop();document.getElementById("id_memory").innerHTML += "<audio id='id_preload_"+g_preload_counter+"'></audio>";document.getElementById("id_preload_"+g_preload_counter).src="audio/"+preload_this_audio+".wav";document.getElementById("id_preload_"+g_preload_counter).volume = 0;document.getElementById("id_preload_"+g_preload_counter).play();document.getElementById("id_preload_"+g_preload_counter).pause();

This works for Firefox and IE afaik, but the image-preloading doesn't seem to work for Chrome and I'm not sure, if the audio-preload works at all...
Question: Is there an event that fires, when a <img>-tag or <audio>-tag finished loading? I tried <audio>-tag-ID.onload but that never fired.

My second try used a javascript image_object:

var preload_this = g_preload_image.pop();var img_obj = new Image();img_obj.src = preload_this;g_preloaded_images.push(img_obj);

This worked noticeably worse than the first method (on firefox, chrome and IE).

 

My third try is to ask you: How do you preload? How do you ensure, that all assets are ready to use?

 

EDIT:
Does anyone have experience with Preload.js ( http://www.createjs.com/#!/PreloadJS )? Is it worth using?

 

Thanks in advance,

Sima

[mavericknl]

You need to make sure that you know when an image object is ready for use (e.g. add an callback listener). Please take a look at https://www.udacity.com/course/viewer#!/c-cs255/l-52850042 (free course)

[sima]

Hi mavericknl,

 

thanks for sharing the link, it helped alot