@xlibz/image NPM

image

Something similar to the <picture> tag but with a cleaner and clearer syntax

Example

<x-image
  lazy
  srcset="
    /hello.1024max.jpg,
    /hello.1024max.webp,
    /hello.1025min.jpg,
    /hello.1025min.webp,
    /hello.1025min.2x.webp,
    /hello.1025min.2x.jpg,
  "
>
</x-image>

Attributes

srcset: an array of strings, where each string represents an image URL.
The order of specifying URLs is not important. It is determined automatically by the library.
You can write the URL in the following ways:
- /[name].[extension]
- /[name].[px]max.[extension]
- /[name].[px]min.[extension]
- /[name].[px]min.[density]x.[extension]
- /[name].[px]max.[density]x.[extension]
- /[name].[density]x.[extension]
lazy: Lazy loading image (using IntersectionObserver)

Classes

.loading: added to the <x-image> element when the image starts loading.
.loaded: added to the <x-image> element when the image is loaded.

Recipes

To display a spinner while the image is loading, you can do the following:

<x-image
  lazy
  class="image"
  srcset="/hello.jpg"
>
  <div class="spinner"></div>
</x-image>

.loading .spinner {
  animation: spin 2s infinite;
}

.loaded .spinner {
  animation: unset;
  display: none;
}

If you have a modal window with images inside, you can add the lazy attribute to prevent the images from loading until the modal window has a display value other than none.

Cautions

The library is not in its final stage, so avoid using it if you're not familiar with its functionality.
In the current version, you can specify any image format, but the browser compatibility check and fallback will only apply to webp format.