Laravel-medialibrary: Request: Lazy load offscreen images

Created on 11 Dec 2019 · 6Comments · Source: spatie/laravel-medialibrary

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

Source

enniosousa

All 6 comments

Do older and other browsers understand data-src?

freekmurze on 12 Dec 2019

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)

enniosousa on 12 Dec 2019

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

freekmurze on 15 Dec 2019

👍1

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