https://github.com/bennypowers/lazy-image

Lazily load your images with <lazy-image> custom element
https://github.com/bennypowers/lazy-image

custom-elements hacktoberfest html lazy-loading performance webcomponents

Last synced: 2 months ago
JSON representation

Lazily load your images with <lazy-image> custom element

• Host: GitHub
• URL: https://github.com/bennypowers/lazy-image
• Owner: bennypowers
• License: gpl-3.0
• Created: 2018-03-14T19:51:02.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-02-22T04:27:52.000Z (11 months ago)
• Last Synced: 2024-10-17T17:31:04.631Z (3 months ago)
• Topics: custom-elements, hacktoberfest, html, lazy-loading, performance, webcomponents
• Language: HTML
• Homepage:
• Size: 773 KB
• Stars: 47
• Watchers: 3
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@power-elements/lazy-image)

[![npm (scoped)](https://img.shields.io/npm/v/@cycle/core.svg)](https://www.npmjs.com/package/@power-elements/lazy-image)

[![Build Status](https://travis-ci.org/bennypowers/lazy-image.svg?branch=master)](https://travis-ci.org/bennypowers/lazy-image)

[![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/bennyp?utm_source=github&utm_medium=button&utm_term=bennyp&utm_campaign=github)

# 

[Lazily load](https://web.dev/lazy-loading-images/) your images!

## 🚛 Get it!

```

npm i -S @power-elements/lazy-image

```

## 📦 Load it!

```html

  import '/node_modules/@power-elements/lazy-image/lazy-image.js';

  // ...

```

## 💪 Use it!

```html

  

```

The optional placeholder could be any element. Inline SVG, Pure CSS graphics, or an `` would work best.

## 💄 Style it!

You should give your `` elements some specific dimensions, since it absolutely positions its shadow children. In most cases, you should set the wrapping element as well as the `--lazy-image-` custom properties to the known display dimensions of your image.

```html

html {

  --lazy-image-width: 640px;

  --lazy-image-height: 480px;

}

lazy-image {

  width: var(--lazy-image-width);

  height: var(--lazy-image-height);

}

```

`` exposes a set of custom properties for your customizing delight:

Property|Purpose|Default

-----|-----|-----

`--lazy-image-width`|Width of the internal image and placeholder elements|100%

`--lazy-image-height`|Height of the internal image and placeholder elements|100%

`--lazy-image-fit`|[`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property of the internal image and placeholder elements|contain

`--lazy-image-fade-duration`|Duration of the fade in from the placeholder to the image. Set to 0 to disable fading.|0.3s

`--lazy-image-fade-easing`|[`ease`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) property of the opacity transition for the image and placeholder|ease

### Browser support

`lazy-image` manages the loading of your images via an Intersection Observer. In browsers where an Intersection Observer is not present, your images will be loaded immediately much like standard `` elements. Conditionally delivering the [IntersectionObserver polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) along with your `lazy-image`s to your users will ensure that all users experience the benefits of loading images lazily. Stay lazy, friend!