Load images from Browser Cache?

[ErikAtMapache]

Hello all.

 

I've been researching this but haven't found an answer. I'm building a game that has two steps -- a login page and a game page. I'd like to preload the LoadingBackground image via javascript (while in the login page) before the game starts up so that the user doesn't get an ugly empty box while the image is loading. Is there a way to use an image that is in the browser's cache for a sprite instead of using game.load.image()?

 

Thanks for your time.

Erik 

[drhayes]

Yes, you're looking for Phaser.Cache#addImage. If you include the image as an <img> tag you should be able to reference it in your JS and hit the browser cache.

[fariazz]

Maybe using the HTML5 App Cache API you could load the image in the login page (have like a hidden img tag with it), then it will be in the cache for when you get to the next page.

 

It's not a quick setup, but would allow you to save stuff locally https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

[ErikAtMapache]

I've tried several different things but I'm not clear what you put in for the URL. The closest I got was creating a canvas on the page and calling canvas.toDataURL() but that seemed kind of iffy.

 

Your suggestion is greatly appreciated.

 

Erik

[drhayes]

My understanding is, literally, the URL. But I haven't tried it so I'm not sure.

 

There's a setting in Chrome's dev tools to not cache anything. Make sure that's not checked, i.e. you WANT to cache everything. Stick an <img> tag with a path to the image in your login page then, in your game, don't load the image, just add it to the cache by that same path as in the <img> tag... it SHOULD work.

 

Or, honestly, that's how I think it should work. ;p

[ErikAtMapache]

Thanks

I'll check it out.