Adding 'false' stops progress event from firing!?

Question

Adding 'false' stops progress event from firing!?

blaasvaer opened this issue 5 years ago · 20 comments

Properly handling fade in and fade out of images is impossible if I do not add 'false' to:

new createjs.LoadQueue( false );

But when I do, all progress events stop firing.

Now the 'docs' are basically an API doc. Not at all usefull when trying to understand what's going on from a users perspective. WHERE does it explain what happens to events whether I add true or false to the instance? I for sure can't find it ...

Answer 1 · 2019-12-11T15:40:29.000Z

You are toggling tag-based loading (so images load with an tag instead of loading as data (with XHR, or "XMLHttpRequests". As a result, the browser provides no progress events (among other things).

From the main description in the PreloadJS docs:

PreloadJS will try and load content using XHR, since it provides better support for progress and completion events

https://createjs.com/docs/preloadjs/modules/PreloadJS.html

This is just a browser limitation.
Hope this helps!

Answer 2 · 2019-12-11T15:45:45.000Z

Thanks, my issues seems to to be to properly add a loaded image as a background for a DOM element (div). I guess it's because the image is not 'appended' to the DOM after load completion ... how would one go about handling this situation?

Answer 3 · 2019-12-11T15:48:15.000Z

This seems to not be working properly:

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

The image is set alright, but with a random delay as if it's being fetched again ... I'm having trouble figuring out how to properly 'append it to the cache' without having to actually append it to the DOM in some hidden way or another hack.

Answer 4 · 2019-12-11T15:51:47.000Z

Yeah, if you set it to a CSS path, it will in fact load again, since CSS doesn't let you set it to a loaded source. When you load with XHR, it doesn't go to the cache.

You might be able to use the loaded image path.

function handleLoad(e) {
  var img=e.result;
  var path=img.src; // with XHR this should be a blob url
}

If it is loaded with tags (XHR=false), it will be in the cache, so it should load immediately, even if there is a small delay.

Answer 5 · 2019-12-11T15:53:39.000Z

Thanks, that's probably what I'm looking for. I'll give it a go and get back.

Answer 6 · 2019-12-11T15:59:36.000Z

So, will the above code actually store the loaded image into the cache, so that the next time I call the url, it will look in the cache? I wouldn't have to pass the actual path variable around, right?

Answer 7 · 2019-12-11T16:02:07.000Z

What I'm asking is: How can I have BOTH a cached image AND progress events?

Answer 8 · 2019-12-11T16:04:13.000Z

When loading with XHR, it uses blob storage, which is similar to the image cache. You need to get that url, or the loaded image from PreloadJS and pass those around.

You can't request the url image again, since it will load it over again.

Answer 9 · 2019-12-11T16:08:55.000Z

So, what I'm looking for is something along the lines of:

<img src="blob:http://localhost/3aeb1382-410c-a041-a5ff-bf2d168b01b6">?

Answer 10 · 2019-12-11T16:09:37.000Z

But how do I set that as a background-image for a div? Will it work just as a 'normal' image url?

Answer 11 · 2019-12-11T16:11:35.000Z

I think this adds a whole unexpected complexity to the use of PreloadJS, as I'd see this sort of thing as being the expected behavior ... maybe that's just me.

Answer 12 · 2019-12-11T16:12:32.000Z

We want to load images. We want to monitor progress. And then we want to do something with these images. That being the whole point of loading them in the first place.

Answer 13 · 2019-12-11T16:13:46.000Z

Where in the docs can I see this described in clear and understandable language? I'd like to learn my way around the docs, as they didn't provide me much help in this case.

Answer 14 · 2019-12-11T16:25:09.000Z

I basically have an array of objects like this:

...
{
	"image": "lamp.jpg",
	"opacity": 1,
	"colorTheme": {
		"color": "#aee7ff",
		"backgroundColor": "black",
		"blendMode": "normal"
	},
	"texts": {
		"header": "Header here",
		"body": "Copy here"
	}
},
...

that I pass around to other parts of the 'app' ... now, would I have to add the 'blob' to each of these objects after load complete, to make the accessible from other parts of the 'app'?

Answer 15 · 2019-12-11T16:27:28.000Z

How would I otherwise set it as a background-image on a div using:

imageContainer.css('background-image', 'url(' + imagePath + <blob> + ')');?

Answer 16 · 2019-12-11T17:19:27.000Z

The library was never really meant for loading CSS images, since CSS images are applied as string paths. The approach I mentioned was a workaround. I have been trying to make a blob url work as a background, but have so far not had any luck :(

I will keep looking into this.

Answer 17 · 2019-12-11T17:46:10.000Z

OK, thanks, I never thought of css images as being special to 'normal' images – everything is basically an reference to an url somewhere in the world. That may be what's kicking me in the balls right now.

And suddenly having to fight with converting image blobs to actually usable images in the browser, was not something I would have expected from this library …

I must say, that from my initial encounter with PreloadJS to the current 'nightmare' I find myself in is somewhat of a surprise.

But, please let me know if you come up with a solution, that can also give us a heads up in the docs ...

Answer 18 · 2019-12-11T18:38:14.000Z

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.

Answer 19 · 2019-12-11T18:54:55.000Z

Glad you found a solution. I was also trying that, but getting errors with my Blob URL.
https://jsfiddle.net/wocd3rj1/

Answer 20 · 2021-11-04T12:49:51.000Z

I just added the missing parenthesis to your code, and now it works:

var queue = new createjs.LoadQueue();
queue.loadManifest({id:"image", src:"https://playpen.createjs.com/CORS/awesome.jpg", type:"image", crossDomain:true});
queue.on("complete", function(event) {
  var img = queue.getResult("image");
  var blob = img.src;
 
  var div = document.getElementById("canvas");
  div.style.backgroundImage = "url('"+ blob +"')";
}) <-- YOU WERE MISSING THIS LAST PARENTHESIS

So, now we have a working snippet right here, eh?