Problem/Motivation

Currently there's no threshold on the intersection observer, so images get loaded as they enter the viewport.
This causes a short delay before the image is visible.

When using <img loading="lazy"> images start loading when they get near the viewport so they're more likely to have finished loading by the time they enter the viewport.

Edit: seems like the threshold is 300px. On Chrome it's 1250px for fast connections and 2500px for slower connections.

Proposed resolution

Change the threshold to be more similar to the native value.

Issue fork easy_responsive_images-3444583

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

kubrick created an issue. See original summary.

kubrick’s picture

kubrick commented
Issue summary: View changes
kubrick’s picture

kubrick commented
Issue summary: View changes
kubrick’s picture

kubrick commented
Issue summary: View changes

kubrick opened merge request !25

kubrick’s picture

kubrick commented
Status: Active » Needs review
seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented

This seems to make sense! Thanks for the issue. I will check the PR this week and try to get this in.

smustgrave’s picture

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

Reading the article on https://web.dev/articles/browser-level-image-lazy-loading#distance-from-... this appears to make sense.

seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented
Status: Reviewed & tested by the community » Needs work

Looking at this again, I guess this is a tradeoff between initial loading times and perceived performance while scrolling.

Could we maybe make this configurable with a link to https://web.dev/articles/browser-level-image-lazy-loading#distance-from-... in the settings page? I would be happy to default to what chrome does, but I can think of some cases for media rich sites where you might want a smaller offset.

kubrick’s picture

kubrick commented

I'd be ok with making it configurable. Which way should be the default behavior?

The current configuration for the module links to "Generate image styles" page, adding the option there feels out of place to me.
While making it part of the display config might make it too granular - I'd think I'd prefer it to be a global setting.

seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented

I agree this should be a global setting. Added this to the config page we have right now is a bit weird, but I guess I can live with that.

The default should be what chrome does. I don't think this is something lots of people think about. I just know at least 1 example of a site that I would like to have a lower default for performance, so that is why I chose 300 in the first place :)

We should have an update hook to set it to our new default, for the example site I would want a lower default for, I can change it manually.

kubrick closed merge request !25

kubrick reopened merge request !25

kubrick’s picture

kubrick commented
Status: Needs work » Needs review
seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented

Thanks for the changes, this looks good! I will try to test it shortly. If other people can check this out and RTBC that would also help!

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Left some review comments.

kubrick’s picture

kubrick commented
Status: Needs work » Needs review
seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented
Version: 1.3.3 » 1.4.0
Status: Needs review » Fixed

Merged, thanks!

seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented

Fixed issue credits.

Status: Fixed » Closed (fixed)

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