Lazy loading doesn't work properly in Firefox

[t-h-e]

Describe the bug

I have been using version 1.12.0 with a photo album with a few hundred photos. I used renderPhoto to add the attribute loading={"lazy"} to the image tag. This worked as expected in Firefox and Chrome. Only images in the viewport would be loaded from the beginning. Other images were loaded on the fly by the browser as soon as they hit the viewport.

I recently upgraded to 3.0.1. I have tried using render and componentsProps to add loading={"lazy"} to img tags. The attribute gets added and works in Chrome as before. In Firefox on the other hand, all images are loaded right from the start.

Expected behavior

Firefox should only render images that have the attribute loading={"lazy"} set as soon as they hit the viewport. I expect it has something to do how react-photo-album renders its components why Firefox behaves weirdly.

How to reproduce

Have images with a few hundred images. MasonryPhotoAlbum should be in viewport right from the start or for testing maybe the only element on the page.

      <MasonryPhotoAlbum
        photos={images}
        render={{
          image: (props, context) => (
            <img {...props} loading={"lazy"} />
          ),
        }}
      />

Screenshots / Logs

No response

Additional context

Thanks for this awesome component. I really like it. If you need any more information, let me know.

[t-h-e]

I should have searched 2 more minutes only. This is a Firefox issue. See https://bugzilla.mozilla.org/show_bug.cgi?id=1647077

Fix is to put the loading attribute before the src attribute. e.g.

 <MasonryPhotoAlbum
        photos={images}
        render={{
          image: (props, context) => (
            <img loading={"lazy"} {...props} />
          ),
        }}
      />

Sorry for the noise.

[igordanchenko]

@t-h-e just FYI, the library renders images with loading="lazy" attribute since v2.0.0, so you probably do not need the render function at all if that's the only modification to the <img> tag that you are making.

[t-h-e]

Great to know. I just checked. react-photo-album seems to place loading after src, but before srcset, which seems to work in Firefox. If you have no srcset attribute though, it does not work. As I do not have a srcset attribute set, I need a render function though.

[igordanchenko]

Thank you for providing the additional details. That's an odd Firefox issue. It's also strange that all corresponding tickets are closed. Anyway, I'll update the library and change the order of these attributes.

[github-actions[bot]]

:tada: This issue has been resolved in version 3.0.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: