This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

Images loaded callback?

Follow
Avatar
Matt Bailey

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.

3

Comments

16 comments

Sort by Date Votes
  • Avatar
    Yakir Perlin

    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
    Comment actions Permalink
  • Avatar
    Rheinschafe GmbH

    Hi Yakir,

    is there any update on this one?

    It would be really useful to have a callback.

    Best regards

    Fabian

    0
    Comment actions Permalink
  • Avatar
    Shirly Manor

    H Fabian,

    We have a ts definition file in the JS-core library.
    You can use it in React.

    0
    Comment actions Permalink
  • Avatar
    Matt Bailey

    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
    Comment actions Permalink
  • Avatar
    Shirly Manor

    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
    Comment actions Permalink
  • Avatar
    Matt Bailey

    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
    Comment actions Permalink
  • Avatar
    Roee Ben Ari

    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
    Comment actions Permalink
  • Avatar
    Matt Bailey

    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
    Comment actions Permalink
  • Avatar
    Roee Ben Ari

    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
    Comment actions Permalink
  • Avatar
    Matt Bailey

    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
    Comment actions Permalink
  • Avatar
    Roee Ben Ari

    Hi Matt,

    In the meantime, you can set style="width: 100%"  for the img tag to smooth the resize phase. 

    0
    Comment actions Permalink
  • Avatar
    Robert Lightfoot

    Any action on this yet?

     

    0
    Comment actions Permalink
  • Avatar
    Roee Ben Ari

    Hi Robert, Still no progress on this. 

    Did you try adding "style="width: 100%"?

    0
    Comment actions Permalink
  • Avatar
    Shawn Oatley

    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
    Comment actions Permalink
  • Avatar
    Mo Ip

    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
    Comment actions Permalink
  • Avatar
    Originate
    • Edited

    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
    Comment actions Permalink

Post is closed for comments.