-
Notifications
You must be signed in to change notification settings - Fork 764
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding 'false' stops progress event from firing!? #267
Comments
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:
https://createjs.com/docs/preloadjs/modules/PreloadJS.html This is just a browser limitation. |
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? |
This seems to not be working properly:
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. |
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.
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. |
Thanks, that's probably what I'm looking for. I'll give it a go and get back. |
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? |
What I'm asking is: How can I have BOTH a cached image AND progress events? |
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. |
So, what I'm looking for is something along the lines of:
|
But how do I set that as a background-image for a div? Will it work just as a 'normal' image url? |
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. |
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. |
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. |
I basically have an array of objects like this:
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'? |
How would I otherwise set it as a background-image on a div using:
|
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. |
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 ... |
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 ) {
...
Hope this saves someone else the bleedin' nightmare I just went through. |
Glad you found a solution. I was also trying that, but getting errors with my Blob URL. |
I just added the missing parenthesis to your code, and now it works:
So, now we have a working snippet right here, eh? |
Properly handling fade in and fade out of images is impossible if I do not add 'false' to:
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 ...
The text was updated successfully, but these errors were encountered: