Image placeholder incorrectly lazy-loaded
See original GitHub issueBug 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: https://cloudinary.com/documentation/react_image_manipulation#image_placeholders
…
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
<Image
className='img-responsive'
cloudName='...'
label={label}
publicId={src}
responsive
loading='lazy'
width='auto'
flag='lossy'
secure
>
<Placeholder
type='blur'
/>
</Image>
Error screenshots
Please note how the placeholder image below has data-src
rather than src
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:
- Created 3 years ago
- Reactions:5
- Comments:14 (5 by maintainers)
Thanks @maoznir
I’m only going by the documented behaviour here: https://cloudinary.com/documentation/react_image_manipulation#image_placeholders
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.