CODEWITHSUNDEEP
javascripthtmllazy-loading
bestestefan
bestestefan

Reputation: 871

lazyloading images - noscript fallback code

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?

Upvotes: 3

Views: 1120

Answers (2)

Oded BD
Oded BD

Reputation: 3286

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

Upvotes: 3

Denis Ryabov
Denis Ryabov

Reputation: 1350

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');

Upvotes: 2

Related Questions