Logo Logo

Documentation v1.1.4

Preview
Light
Dark
System

Overview

Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API. For more info see the official siteand the Github repository.

Usage

Lozad Javascript files Javascript file is bundled in the global plugin bundles and globally included in all pages: 
<script src="assets/plugins/global/plugins.bundle.js"></script>

Initialization

  • Lozad's Javascript is bundled within the main plugins bundle assets/plugins/global/plugins.bundle.js and globally included in all pages.
  • Lozad is globally initialized through .lozad class as defined in src/js/components/app.js.

Examples

In HTML, add an identifier to the element, default selector identified is .lozad class. 
<div class="d-flex flex-center h-300px">
    <img 
        src="assets/media/misc/spinner.gif" 
        data-src="assets/media/misc/stock/600x400/img-1.jpg" 
        class="lozad rounded mw-100" 
        alt=""
    />
</div>
try metronic buy mega bundle
Preview Get Help Buy Now