GitXplorerGitXplorer
j

unlazy

public
778 stars
13 forks
5 issues

Commits

List of commits on branch main.
Unverified
fe13aef9f9e11247c67c44bb656dea34db12cb6d

chore: downgrade TypeScript version

jjohannschopplich committed a month ago
Unverified
d1f0e928e20d5ce7d3d420728a91ca8561e2ef05

chore: release v0.12.1

jjohannschopplich committed a month ago
Unverified
97cbb3631d0451ef4ed8913a0a562ed59d304942

chore(svelte): add tslib

jjohannschopplich committed a month ago
Unverified
9f2ab042db6e1e17679659da94f9264d3cc87dcc

chore: upgrade dependencies

jjohannschopplich committed a month ago
Unverified
5518e5423d6a800bd53abcfc1eda0d24bfb9cf9f

chore: add `typesVersions` back (fixes #57)

jjohannschopplich committed a month ago
Unverified
d2260a96ea71331a410b4cd6ab891b9ba4f0a2ea

chore: release v0.12.0

jjohannschopplich committed 2 months ago

README

The README file for this repository.

unlazy library

unlazy

npm version bundle

Universal lazy loading library leveraging native browser APIs. It is intended to be used with the loading="lazy" attribute alongside (blurry) placeholder images and with a BlurHash or ThumbHash string.

Features

  • 🎀 Native: Utilizes the loading="lazy" attribute
  • 🎛️ Framework-agnostic: Works with any framework or no framework at all
  • 🌊 BlurHash & ThumbHash support: SSR & client-side BlurHash and ThumbHash decoding
  • 🪄 Sizing: Automatically calculates the sizes attribute
  • 🔍 SEO-friendly: Detects search engine bots and preloads all images
  • 🎟 <picture>: Supports multiple image tags
  • 🏎 Auto-initialize: Usable without a build step

Setup

📖 Read the documentation

# pnpm
pnpm add -D unlazy

# npm
npm i -D unlazy

Basic Usage

📖 Read the documentation

To apply lazy loading to all images with the loading="lazy" attribute, import the lazyLoad function and call it without any arguments:

import { lazyLoad } from 'unlazy'

// Apply lazy loading for all images by the selector `img[loading="lazy"]`
lazyLoad()

You can target specific images by passing a CSS selector, a DOM element, a list of DOM elements, or an array of DOM elements to lazy-load to lazyLoad.

💻 Development

  1. Clone this repository
  2. Enable Corepack using corepack enable
  3. Install dependencies using pnpm install
  4. Run pnpm run dev:prepare
  5. Start development server using pnpm run dev inside the one of the packages directories

License

MIT License © 2023-PRESENT Johann Schopplich