Responsive images should lazily load

[taylor-peterson]

Currently, all images load at the same time. This results in longer page load times.

Integrating the functionality of something like https://www.appelsiini.net/projects/lazyload would result in a much better experience.

[roeeba]

Hi @taylor-peterson, it's on our roadmap to support a lazy loading method, though no ETA we can share at the moment. We will update here on any progress done in this direction.

[taylor-peterson]

Would you be interested in a pull request for this feature?

[roeeba]

Hi @taylor-peterson, thank you for your suggestion! Can you please share a Gist with your code / planned changes so we can take a look at it?

[taylor-peterson]

At this point, I don't have any code/designs. I've just gone deep enough to figure out that it should be possible to cleanly integrate lazy-loading with the existing functionality.

Are there a set of contribution guidelines I should follow? Or just jump right into coding things up and sharing a Gist with you?

[roeeba]

Hi @taylor-peterson, apologies for the delayed response. Looking back at your initial request, it seems that we already have such a lazy loading functionality in our responsive implementation.

For example, the following call: cl.image("sample", {width: 'auto', crop: 'scale', responsive: true})

Results in this element: <img src="" data-src-cache="http://res.cloudinary.com/demo/image/upload/c_scale,w_auto/sample" class="cld-responsive">

data-src-cache is then used by Cloudinary's own responsive method to render the image by setting its src attribute after calculating its responsive size and setting a constant width transformation. Note that the original URL with the w_auto is still available in the data-src-cache attribute and is used for updating the image on browser resize.

See an example here - http://codepen.io/eitanp461/pen/dvJQao

Let me know if it applies with your use-case?

[taylor-peterson]

Best I can tell, Cloundinary currently does that rendering for all images on the page when the page loads.

What I'm looking for is to only render images in the current viewport (or just below it). Additional images could then be loaded later when they are scrolled into view.

[roeeba]

Hi @taylor-peterson, sorry for the delayed reply. I've forwarded your request to our dev team to review. Updates will follow on this thread.

[eitanp461]

@taylor-peterson see https://codepen.io/eitanp461/pen/BRLZYq which uses https://github.com/aFarkas/lazysizes. You can use something similar as an interim solution until lazy loading responsive images will be baked into Cloudinary core.

[MarkOGDev]

Hello,

Bit late to the party but here is my solution for 'Lazy Responsive Cloudinary Images' that I use in my project. With more time I could modify the project make it easier to understand/use. You may be able to use it in your projects or get an idea how to extend the Cloudinary JS to do what you want.

https://github.com/MarkOGDev/CloudinaryLazyResponsive

Regards, Mark.

[roeeba]

Thanks for sharing, @MarkOGDev!

[MarkOGDev]

👍 I just uploaded a new code base for my solution. Nicer structure and better coding and nicer demos. https://github.com/MarkOGDev/CloudinaryLazyResponsive

[Gog0]

When will you support this feature? We need lazy loading with responsive images

[streetcolor]

Any news of that?

[roeeba]

Hi @streetcolor. I'm checking it with our engineering team. Updates to follow.

[asisayag2]

Hi @streetcolor and @Gog0, Supporting lazy loading as part of our core library is in our roadmap. However, it's not included in our concrete near-term plans.

For now, I would suggest evaluating one of the solutions suggested in this thread.

If you feel like contributing a solution, we'll appreciate a PR.

[a-axton]

I made this quick script using the callback_reveal option that goes with the popular verlok/lazyload. It doesn't have resizing on window resize but it wouldn't be too hard to add if you need it.

callback_reveal: (el) => {
  const hasAutoWidth = el.dataset.src.includes('w_auto')
  if (hasAutoWidth) {
    const width = Math.ceil(el.offsetWidth / 100) * 100
    el.src = el.dataset.src.replace('w_auto', `w_${width}`)
  }
}

[woodyrew]

Hi @asisayag2 Any progress or updates on this?

[shirlymanor]

@woodyrew it's on our road map to handle this issue but no ETA yet. Did you try any of the workarounds suggested above?