javascript - Canvas - game loading for slow internet -

i have problem canvas game loading.

i have plenty of images, 1 sound effect , background music. on pc load nice. problem mobile phone, have slow internet. images loads sound , background music downloading after game starts.

code example:

main = getelementbyid('wrapp'); bg = new image(); bg.src = 'bg.png';  msound = new audio('main.wav'); msound.volume = .05; msound.load(); msound.loop = true; msound.play();  sound = new audio('jump.wav'); sound.volume = .20; sound.load();   main.addeventlistener('touchstart', function() {      sound.play(); }  //some game functions  function update() {     //some functions  }  function start() {     update();     requestanimframe(start); } 

how make page load , run game? example: there information 'please wait..." , after images , sounds load, canvas show up.

here's fast dirty solution:

mainsound.addeventlistener("canplay", function() {    mainsound.play();    start(); }); 

however proper solution should involve:

1. designing class, responsible loading of media
2. waiting media loaded. (you can use combination of "$(window).load()" , "oncanplay" event. if not jquery, can in google stuff this
3. starting game there