Vanilla LazyLoad

Lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport.

Installation

Add script right before closing </body> tag, and initialize Lazyload

<!-- Plugin js -->
<script src="src/plugins/vanilla-lazyload/dist/lazyload.min.js"></script>

<!-- Theme js -->
<script src="src/js/theme.js"></script>

If you want to editing Lazyload js open file theme.js and edit this function myLazyload();

How to trigger lazyload

In order to make your content be loaded by LazyLoad, you must use some data- attributes instead of the actual attributes.

Example

Lazy image:

<img alt="A lazy image" class="lazy" data-src="lazy.jpg">

Lazy image with low quality placeholder:

<img alt="A lazy image" class="lazy" src="lazy-lowQuality.jpg" data-src="lazy.jpg">

background image:

<div class="lazy" data-bg="lazy.jpg"></div>

Lazy video:

<video class="lazy" controls width="620" data-src="lazy.mp4" data-poster="lazy.jpg">
  <source type="video/mp4" data-src="lazy.mp4" />
  <source type="video/ogg" data-src="lazy.ogg" />
  <source type="video/avi" data-src="lazy.avi" />
</video>

Lazy iframe:

<iframe class="lazy" data-src="lazyFrame.html"></iframe>

NOTE: It is not recommended to use one element with Aos js, because the Aos js transition will not be visible while the image is still loaded.

For complete documentation read in here