How do I store preloaded image blobs in the cache?

[Sam Blåsvær]

I'm loading a range of images. But using new createjs.LoadQueue();

But I cannot from the documentation figure out how to cache the images for later reference, adding them to a div as background-image using js and css.

Now, is there ANY example of how to do this?

[Sam Blåsvær]

When I console log out the event from 'handleFileLoad' I get this:

function handleFileLoad ( e ) {
	var item = e.item,
		type = item.type,
		img = e.result,
		path = img.src;

item is:

Object { src: "/assets/images/background-images/lamp.jpg", type: "image", id: "/assets/images/background-images/lamp.jpg", maintainOrder: false, callback: null, data: null, method: "GET", values: null, headers: null, withCredentials: false, … }

type is:

image

img is:

<img src="blob:http://localhost/907296a7-a820-cc40-9c12-9fccb5dfe722">

and path is:

blob:http://localhost/3bfdb653-89b8-a444-af85-e34196968671

Now, the challenge is, how do I set the background-image of a div using:

imageContainer.css('background-image', 'url(' + ??? + ')');

I simply cannot figure out how to get this to work from the documentation. When googling the shit out of this I run into things like URL.createObjectURL(new Blob([uarray])) yadda yadda ... but I find no mention of anything resembling createObjectURL in the docs?

[Sam Blåsvær]

OK, this was a tricky one. After hours of pulling hair, wild guessing, trying to understand the docs etc etc. I think I finally (though not completely confident yet, as I don't know what will hit me in a few minutes, a few hours or maybe even a few days?) got the blob thing to work.

When a file is completed loading, look up the result from the queue (started elsewhere) using the id from the loaded image:

function handleFileLoad ( e ) {
	var result = queue.getResult(e.item.id, true); // This will load the binary image data from XHR

	// 'Convert' the data into something useful for the browser
	blob_url = URL.createObjectURL( result );

...
	
	// And later you can use it like this
	imageContainer.css('background-image', 'url(' + blob_url + ')');

Hope this saves someone else the bleedin' nightmare I just went through.