Logo

Documentation v8.2.5

Downloads 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.jsand globally included in all pages.
  • Lozad is globally initialized through .lozadclass as defined in src/js/components/app.js.

Examples

In HTML, add an identifier to the element, default selector identified is .lozadclass.
<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>