Images loaded callback?
When using cloudinary-core-shrinkwrap to auto serve up responsive images, is there an 'images loaded' callback I can hook into?
The reason I ask is that there is a short delay before the images are displayed in the browser, so it would be nice to fade them in once they are loaded.
-
Hi,
It sounds like a good feature request, I will open a feature request on your behalf.
I will keep you posted.
Thanks,
Yakir
0 -
Hi Yakir,
is there any update on this one?
It would be really useful to have a callback.
Best regards
Fabian
0 -
H Fabian,
We have a ts definition file in the JS-core library.
You can use it in React.
0 -
Hi Shirly, I wonder if you can expand on that?
I'm not using React, just a simple flat-file HTML site with cloudinary-core-shrinkwrap. Our image URLs look something like this: https://res.cloudinary.com/[my-company]/image/upload/w_auto,c_scale,f_auto,q_auto/v1553269357/my-image.jpg
If some kind of event were triggered when an image is loaded/ready, that I could hook into, then I would be able to manipulate the images accordingly...
0 -
Hi Matt,
Are you following the direction to build a responsive URL as described here?
You should get a different width by the size of the device.
Thanks,
Shirly
0 -
Hi Shirly, thanks for the reply. However, the question I'm asking is a different one.
When Cloudinary 'returns' the scaled/responsive images, there is a short delay before the image is displayed (presumably while the JavaScript and the server decide what size image to send).
It would be hugely useful if the cloudinary-core-shrinkwrap library had an 'images loaded' JavaScript callback that I could hook into. That way I could fade images in gracefully when they're ready, rather than just have them 'pop' into view like they currently do, which is a bit jarring. It's only a few milliseconds delay, but it's enough to notice...
0 -
Hi Matt,
Thank you for pointing it out. Having the ability to target the loading event makes a lot of sense. I've opened an internal ticket to our developers to consider that (and also consider implementing graceful loading ourselves).
We'll update here if and when there'll be any updates.0 -
Thanks Roee, although the first reply to my question 8 months ago basically said the same thing ;) Oh well, thanks anyway, I can hope... :)
0 -
Hey Matt,
Sorry, missed that response completely :)
I assume this was never prioritized by the team. That said, the team is re-evaluating this again now so the priority may change.0 -
Awesome, thank you. I plan to have another look at this myself anyway soon, so if I figure out a way to do it I'll post it here.
Currently my workaround is to fade the whole page in after 500ms (it's this site if you're interested). This is good enough to mask most of the images 'popping in' as they are displayed, unless your connection speed is very slow. It's not a very 'intelligent' method though - I would prefer to be able to 'lazy load' individual images though when they're ready.
0 -
Hi Matt,
In the meantime, you can set style="width: 100%" for the img tag to smooth the resize phase.0 -
Any action on this yet?
0 -
Hi Robert, Still no progress on this.
Did you try adding "style="width: 100%"?0 -
Any update to this? I would like to fire an event for my other javascript framework to resize other elements after Cloudinary has finished loading the images on the page.
0 -
Hi Shawn,
There is no ETA for this yet; I will check with my teammates and will update here if I get more insights.
0 -
Has this gone ahead? i am using locomotive scroll and need to resize my page as dynamic elements are loaded. at the moment i am setting a fixed height but this is not ideal for every kind of image. Im using Vuejs component for @nuxt/cloudinary
0
![https://res.cloudinary.com/[my-company]/image/upload/w_auto,c_scale,f_auto,q_auto/v1553269357/my-image.jpg](https://res.cloudinary.com/[my-company]/image/upload/w_auto,c_scale,f_auto,q_auto/v1553269357/my-image.jpg){kind=link}
Post is closed for comments.
Comments
16 comments