lazyloading images - noscript fallback code

Question

I'm loading images on my site using js library jquery lazyload2, to display images I use the code below:

<img class="lazyload img-fluid" src="{{$product->getEncodedThumb()}}"  data-src="{{asset($product->getMainImage())}}" alt="{{$product->name}}">

Everything works fine so far, but I need to make the version of my site for users who don't have javascript enabled, how would I approach this? I could just replace all src tags on lazyloaded images with high quality images, but it would completely miss the point, as it would always download high quality images without lazyloading, how should I redesign my structure to allow for javascript lazyloading & noscript standard loading? Do I need to create completely different layout for noscript users?

Answer 1

You can use the new built-in lazy loading in HTML

Just with adding loading="lazy" attribute to your like that:

<img src="https://test.photos/300.jpg" loading="lazy" />

Here you can see browser support:

https://caniuse.com/#feat=loading-lazy-attr

Answer 2

Usually img tag is followed by noscript tag with embedded original image, i.e.

/* hide lazyload images for disabled js */
.lazyload-hidden {
    display: none;
}

<img class="lazyload lazyload-hidden img-fluid"
     src="{{$product->getEncodedThumb()}}"
     data-src="{{asset($product->getMainImage())}}"
     alt="{{$product->name}}">
<noscript>
    <img class="img-fluid" src="{{asset($product->getMainImage())}}" alt="{{$product->name}}">
</noscript>

// show lazyload images
$('img[data-src]').removeClass('lazyload-hidden');