Contrib.social

Lazy load images not replaced correctly

Open on Drupal.org →
Created on 4 January 2024, 6 months ago
Updated 27 March 2024, 3 months ago

When using the lazy loading setting and depending on how the CSS is used for the layout of the element on the page the wrong image size can be selected by resizer.js. If also get a flash of the "no image" icon as the image is replaced.

I have attached a video of this issue to the ticket to demonstrate

🐛 Bug report
Status

Active

Version

1.3

Component

Code

Created by

🇨🇦Canada paulsheldrake

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @paulsheldrake
  • Comment 6 months ago →
    🇳🇱Netherlands seanB Netherlands

    I would generally advise adding width: 100% to responsive images in CSS. I think that should solve the issue. It seems that in this case the parent of the image does not have a width when the image is empty, while the image is looking at the width of the parent to determine the correct source.

    Regarding the "flash", we unset the src for lazy loaded images to prevent them from being loaded by the browser. It prevents duplicate images being loaded in some cases. However, if an image is in the viewport, removing the source can cause this flash. I think we might be able to figure something out to solve this.

  • Comment 3 months ago →
    🇧🇪Belgium DieterHolvoet Brussels

    I created a separate issue for the broken image flash problem: 🐛 Flash of missing image when lazy loading Active .

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024