Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Image placeholder incorrectly lazy-loaded

See original GitHub issue

Issue Description

Bug report for Cloudinary React SDK

Before proceeding, please update to latest version and test if the issue persists

Describe the bug in a sentence or two.

It appears that when defining a placeholder for a lazy-loaded image, the placeholder is also lazy-loaded. contrary to the documentation here:

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK [ ] Babel - Babel errors or cross browser issues [ ] UI/Performance - Display or performance issues [x] Behaviour - Functions aren’t working as expected (Such as generate URL) [ ] Documentation - Inconsistency between the docs and behaviour [ ] Incorrect Types - For typescript users who are having problems with our d.ts files [ ] Other (Specify)

Steps to reproduce


Error screenshots

Please note how the placeholder image below has data-src rather than src Screenshot from 2020-08-02 08-58-44

Browsers (if issue relates to UI, else ignore)

[ ] Chrome [ ] Firefox [ ] Safari [ ] Other (Specify) [x] All

Versions and Libraries (fill in the version numbers)

React Cloudinary SDK - 1.6.6 React - 16.5.2 Create-React-App - 3.4.1

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:5
  • Comments:14 (5 by maintainers)

github_iconTop GitHub Comments

taijutencommented, Aug 18, 2020

Thanks @maoznir

I’m only going by the documented behaviour here:

You can also combine placeholder images with the lazy loading feature. In this case, the placeholder image is downloaded on page load, but the target image will only be downloaded once the user scrolls down to the image on the page.

ardiewencommented, Aug 18, 2020

I thought I’d comment my support for this as well, as I’m experiencing the exact same issue as @taijuten and the way he described it is consistent with the behaviour I’m seeing on my project.

On a product category page for an online store, all the image placeholders on the page should be loaded eagerly creating a “blurred” placeholder, then “blurred up” lazily to the target image.

What actually happens is the placeholder itself will be lazily loaded on scroll, causing a brief flash of whitespace, followed by a brief flash of blurred placeholder image, then followed by the target image load.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Lazy Loading Images – The Complete Guide -
Which Images can be Lazy Loaded? ... Do not lazy load all the images ... As the user scrolls down the page, the...
Read more >
Use image placeholders to avoid layout jumping when lazy ...
When lazy-loaded images are rendered in a thread, it causes the layout to jump around. This is especially painful when scrolling upwards through ......
Read more >
The lazy load placeholder is bigger than the actual image
I tried the lazy loading for images and it works well. But, the lazy load place holder (gray color) is bigger in size...
Read more >
Preventing Content Reflow From Lazy-Loaded Images
Reflow is a problem because it's a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any...
Read more >
You are loading Images wrong! Use this instead - YouTube
As developers, we have to deal a lot with images, from blogs to ... loading using React with awesome placeholders (before the image...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found