@libshin/lazy-image

TL;DR

Lazy load images that are off the viewport.

Take a look at an example.

How to use

Basic usage

In order to use this package, just use lazy-url instead of url in <img>.

<!-- head -->
<link rel="stylesheet" href="..../lazy-image.css">
<!-- somewhere in the body -->
<img lazy-src="image_url" alt="alt">
<!-- footer -->
<script src="..../lazy-image.umd.js"></script>
<script>
  lazyImage() // Scan for img[lazy-src]
</script>

Placeholder

If you wrap a img[lazy-src] inside of a [lazy-placeholder], the image related to lazy-placeholder will be shown instead of the image and once the image is loaded, lazy-src will appear and replace lazy-placeholder.

<!-- head -->
<link rel="stylesheet" href="https://unpkg.com/@libshin/lazy-image/build/lazy-image.css">
<!-- somewhere in the body -->
<div lazy-placeholder="placeholder_src">
  <img lazy-src="image_url" alt="alt">
</div>
<!-- footer -->
<script src="https://unpkg.com/@libshin/lazy-image/build/lazy-image.umd.js"></script>
<script>
  lazyImage(strict, options) // Scan for img[lazy-src] and [lazy-placeholder]
</script>

See here for the details on the strict/loose mode and here for the options' details.

Web Component

<!-- Polyfills -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>


<link rel="import" href="https://unpkg.com/@libshin/lazy-image/webcomponent/lazy-image.html">

<lazy-img src="image_url"></lazy-img>

<lazy-img placeholder="placeholder_src" src="image_url"></lazy-img>