Images

Une fonction de lazyload pour les navigateurs qui ne le supportent pas nativement.

Si vous utilisez Craft CMS et Imgix, vous pouvez utiliser l'outil Srcset generator pour Overdog.

Installation

Import and run the function in your project

import { fnLazyload } from "@overdog/fn"

fnLazyload()

Example with an object fit cover image inside a div

<div class="relative bg-slate-200 aspect-16/9"
  <img 
    class="absolute inset-0 w-full h-full object-cover object-center"
    loading="lazy"
    decoding="async"
    data-srcset= your srcset URLs
    sizes=
    data-src= Fallback for old browsers
    alt=
  />
</div>

Example with the real size / ratio of an image

<div>
  <img
    class="max-w-full h-auto bg-slate-200 text-slate-200"
    height="{{ photo.height }}" -> height of your image from the CMS
    width="{{ photo.width }}" -> width of your image from the CMS
    loading="lazy"
    decoding="async"
    data-srcset= your srcset URLs
    sizes=
    data-src= Fallback for old browsers
    alt=
  />
</div>

Modal

iframes