lazy-img

A simple natvie web component for lazy loading images once they are in view of the user. See CodePen demo below.

Usage:

Import web component loader:
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"/>

Import lazy-img.js:
<script src="lazy-img.js"/>

Use the lazy-img the same way as any other HTML image tag:
<lazy-img fadein="5000" src="myImage.jpg" alt="my Image" />

Attributes:

• src Image Source
• alt Alternate text in case image doesn't load
• fadein Time in milliseconds for fade-in animations

Demo:

CodePen Demo