In commit https://git.drupalcode.org/project/lazy/commit/502595040c862cb3d729ce2bc... native lazy loading is preferred. In the JavaScript all elements with the attribute loading="lazy" are processed and the srcAttr attribute is used to set the src attribute on those elements. However, the source elements within a picture element do not have the loading attribute and next to that have a srcsetAttr attribute that is not converted back into a src-set attribute which causes the responsive images to break in Chrome.

Proposed solution:
In the JavaScript that converts all elements with the loading attribute also take into account source elements and their src-set attribute. Possibly by selecting all elements that have a data-src-set (or whatever is configured as srcsetAttr attribute) and create a src-set attribute?

CommentFileSizeAuthor
#2 lazy_fix_native_lazy_loading_for_source_in_picture_element-3089436-1.patch516 bytesmarty2081

Comments

Marty2081 created an issue. See original summary.

marty2081’s picture

marty2081 commented
Status: Active » Needs review
StatusFileSize
new lazy_fix_native_lazy_loading_for_source_in_picture_element-3089436-1.patch516 bytes

And here is patch.

Gerben Spil’s picture

Gerben Spil commented
Status: Needs review » Reviewed & tested by the community

Tested that the patch fixes the issue.

keboca’s picture

keboca commented

@Marty2081 good catch! I tested it out and it works for me as well. Thanks for your comment @Gerben\ Spil

Even tho, I think, perhaps we might include `sizes` attribute as well. I created a ticket to talk about it: https://www.drupal.org/project/lazy/issues/3089825#comment-13322708

Certainly this patch solve my case, nevertheless perhaps someone else out there maybe is struggling with `sizes` attributes as well. Then we may include it in a new patch, what do you guys think?

BTW I will close the ticket I mentioned above, it something comes up then we can follow the thread here.

osman’s picture

osman
Location Copenhagen
commented
Status: Reviewed & tested by the community » Needs work

@Marty2081 Thank you for reporting the issue and providing a patch for it.

I like the direction you're going with, but I think it needs more work as it seems to be changing the attributes of all images at once.

I started drafting a fix for this based on your idea, but placed in loaded() to make sure lazy-loading still works for the image got triggered only.

I should find some time this weekend to deliver the fix. @keboca I'll include your suggestion for the sizes attribute as well.

Thanks,

keboca’s picture

keboca commented

@osman wonderful to hear it! Into ticket I mentioned above I wrote about the way around I found by triggering changes within `loaded` function, it looks like this:

var srcsetAttr = el.getAttribute(lazysizes.srcsetAttr);
if(srcsetAttr !== null) {
  el.srcset = srcsetAttr;
}
var sizesAttr = el.getAttribute(lazysizes.sizesAttr)
if(sizesAttr !== null) {
  el.sizes = sizesAttr;
}

Perhaps it helps you somehow! Anyway thanks, looking forward already to see that new patch!

  • osman committed 61ef4b2 on 8.x-3.x 
    Issue #3089436 by Marty2081, keboca, osman: Using native lazy-loading in...
osman’s picture

osman
Location Copenhagen
commented
Status: Needs work » Needs review
osman’s picture

osman
Location Copenhagen
commented

@Marty2081 and @keboca the commit 61ef4b2 should address the issues you experienced. Please give it a shot and let me know.

osman’s picture

osman
Location Copenhagen
commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.