Installation

npm install zarcore

<script src="zarcore.min.js"></script>
<link href="zarcore.min.css">

Modules

LazyLoader

• Lazy Loading: Loads images only when they appear in the viewport to save bandwidth.
• Caching dengan IndexedDB: Stores loaded images to
• Loader Animasi: Provides visual feedback while images are being loaded.

Usage

<div class="lazy-image-container">
    <div class="loader-container">
        <div class="loader"></div> <!-- Loader Animation -->
    </div>
    <img class="lazy-load" src="path/to/placeholder.jpg" data-src="path/to/image.jpg" alt="Lazy loaded image">
</div>

new zarcore.LazyLoader('.lazy-load', {
    rootMargin: '0px',    // Margin to start loading images before the element enters the viewport
    threshold: 0.1        // Percentage of the element in the viewport to start loading
});

📫 Connect with Me