Show Images Only If They Are In Viewport – ldlazy

ldlazy is a Vanilla JavaScript lazy loading library that shows images only if they are in the viewport.

It detects the visibility change of your images using the IntersectionObserver API and applies visibility and opacity classes to those images when they’re scrolled into view.

How to use it:

1. Load the ldlazy library in the document.

<link rel="stylesheet" href="/dist/index.min.css" />
<script src="/dist/index.min.js"></script>

2. Initialize the ldlazy and determine in which container the library detects visibility change.

ldlz = new ldlazy({
  root: document.body,
});

3. Add the ldlz class to the target image and define the image path using the data-src attribute:

<img class="ldlz" data-src="1.png" />

4. Optionally, you can add a placeholder to the image as follows:

<img class="ldlz" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="1.png" width="800px" height="600px" />

5. Perform a function when the visibility changes.

ldlz = new ldlazy({
  root: document.body,
  toggle: function(n) { 
    // ...
  },
});