Request: Lazy load offscreen images

[enniosousa]

Google recommends for better performance

Lazy loading is the approach of waiting to load resources until they are needed, rather than loading them in advance. This can improve performance by reducing the amount of resources that need to be loaded and parsed on initial page load.
Images that are offscreen during the initial pageload are ideal candidates for this technique. Best of all, lazysizes makes this a very simple strategy to implement. — https://web.dev/codelab-use-lazysizes-to-lazyload-images/

This feature is very simple, just prefix src, srcset and sizes with data- and add the class .lazyload.

<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload" />
<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,  image2.jpg 600w, image3.jpg 900w" 
    class="lazyload" />

I've been implementing lazy load and getting great results.

I implemented lazy load improvised in the view. Example:

@inject('str', 'Illuminate\Support\Str')
@php $lazyloadPrefix = $str->contains($attributeString,'lazyload') ? 'data-': ''; @endphp
<img{!! $attributeString !!} {{ $lazyloadPrefix }}srcset="{{ $media->getSrcset($conversion) }}" onload="this.onload=null;this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';" {{ $lazyloadPrefix }}sizes="1px" {{ $lazyloadPrefix }}src="{{ $media->getUrl($conversion) }}" width="{{ $width }}">

I think there must be a native solution checking only the class attribute value, not entire $attribute String

[freekmurze]

Do older and other browsers understand data-src?

[enniosousa]

I think that browser doesn't undestand data-src. Lazy load offscreen images works, it's necessary install aFarkas/lazysizes on website.

I had tested desktop browser compatibility on browsershots.org (including old browsers and Linux/Windows/macOS) with a simple example available here https://uneven-flowershop.glitch.me/

Firefox >=21 (released 6 years ago)
Chrome =>37 (released 5 years ago)

[freekmurze]

I'm going to pass on this for. I'll revisit this when creating a new major version of the medialibrary.

[royduin]

There is also a native loading attribute, see: https://caniuse.com/#feat=loading-lazy-attr. Just add loading="lazy"

[willemvb]

I think we could optionally support the native attribute, allowing different values:

• lazy: is a good candidate for lazy loading.
• eager: is not a good candidate for lazy loading. Load right away.
• auto: browser will determine whether or not to lazily load.

As seen on https://css-tricks.com/native-lazy-loading/
Hopefully browser support will pick up soon: https://caniuse.com/#feat=loading-lazy-attr

[freekmurze]

PR #1730 (which will be merged in the v8 branch) implements this behaviour.

@willemvb and @royduin: could you please review that PR?