https://github.com/ava-cassiopeia/lazy-img

Custom HTML element for lazy-loading images when they are needed
https://github.com/ava-cassiopeia/lazy-img

Last synced: 13 days ago
JSON representation

Custom HTML element for lazy-loading images when they are needed

• Host: GitHub
• URL: https://github.com/ava-cassiopeia/lazy-img
• Owner: ava-cassiopeia
• Created: 2017-08-24T01:12:36.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-17T04:55:10.000Z (almost 7 years ago)
• Last Synced: 2024-05-21T03:12:50.364Z (6 months ago)
• Language: JavaScript
• Size: 34.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Lazy Image Custom Element

[![npm version](https://badge.fury.io/js/lazy-img-element.svg)](https://badge.fury.io/js/lazy-img-element)

Custom, production-ready HTML element (``) that lazily loads images

as they come on to the screen.

## Getting the Element

Please see the

[releases](https://github.com/aeolingamenfel/lazy-img/releases) page to get the 

latest, minified version of the source for the ``. Import into your 

project as needed.

The element is built on top of the custom element API, and uses the newer

`IntersectionObserver` API. 

If you just need to polyfill the `IntersectionObserver`, you can add the

following:

```HTML

```

If you need to polyfill web components, please see

[webcomponents.org/polyfills/](https://www.webcomponents.org/polyfills/)

## Using the Element

The element is a 1-to-1 copy of the standard HTML `` element, so all 

in-spec attributes and features should also be available to `` 

elements as well.

*Example:*

```HTML

```

## Aspect Ratio Space

In addition to all normal features of the `` tag, you can specify a 

`ratio` attribute so that the `` will occupy the proper space on the 

page while the image is loading. To do so, specify an aspect ratio like:

`[width]:[height]`.

*Example:*

```HTML

```