Delay The Loading Of Elements Until They’re Needed – ZapLoad

Category: Javascript , Loading | June 18, 2024
Author:OzikPutraJarwo
Views Total:34 views
Official Page:Go to website
Last Update:June 18, 2024
License:MIT

Preview:

Delay The Loading Of Elements Until They’re Needed – ZapLoad

Description:

ZapLoad is a lightweight JavaScript library that delays the loading of various elements, like images, videos, scripts, objects, and iframes.

This can optimize page load speed and enhance SEO by deferring the loading of non-essential elements until they’re needed.

ZapLoad works by adding a data-zapload attribute to your HTML elements. This attribute specifies the conditions under which the element should be loaded. You can choose from several delay types, including:

  • scroll: Loads the element when the user scrolls the page.
  • scroll [selector]: Loads the element when the user scrolls to a specific element on the page.
  • click [selector]: Loads the element when the user clicks on a specific element.
  • timeout [time in ms]: Loads the element after a specified time delay.
  • custom: Loads the element when you call a JavaScript function.

How to use it:

1. Install and download ZapLoad with NPM:

# NPM
$ npm install zapload

2. Load the zapload.min.js into your HTML document:

<script src="/path/to/zapload.min.js"></script>

3. Apply the .zapload class and data-zapload attribute to elements, and link to the resources using the data-src attribute instead. You can also set a placeholder image before the real resource loads.

<h2>Load On Scroll</h2>
<img 
  class="zapload" 
  data-zapload="scroll" 
  src="/path/to/placeholder.jpg" 
  data-src="/path/to/image.jpg">
<h2>Load Youtube Video On Click</h2>
<button id="click">Click To Load</button>
<iframe 
  class="zapload" 
  data-zapload="click #click" 
  width="560" height="315" 
  data-src="https://www.youtube.com/embed/gbABaKRSwQs?si=hoMv5M130n9JxNLt" 
  src="https://via.placeholder.com/560x315">   
</iframe>
<h2>Load Image after 5s</h2>
<img class="zapload" 
     data-zapload="timeout 5000" 
     src="/path/to/placeholder.jpg"
     data-src="/path/to/image.jpg">
<h2>Load image when you scrolls to #footer</h2>
<img class="zapload" 
     data-zapload="scroll #footer" 
     src="/path/to/placeholder.jpg"
     data-src="/path/to/image.jpg">

4. Alternatively, you can delay loading until it’s called in JavaScript:

function myFunc(){
  zapload("#image"); 
}

How it works:

ZapLoad works by first initializing and selecting all elements with the .zapload class. It then sets up event listeners for scroll, click, and timeout events, depending on the specified delay type for each element.

For scroll-based lazy loading, the library checks if the user has scrolled and if the target element is in the viewport. If these conditions are met, the library loads the element by setting its src or srcset attribute from the data-src or data-srcset attribute.

For click-based lazy loading, the library listens for click events and checks if the clicked element matches the specified target selector. If it does, the corresponding .zapload element is loaded.

For timeout-based lazy loading, the library sets a setTimeout function to load the element after the specified delay.

The library also provides a custom loading option, where elements can be manually loaded by calling the zapload function with a selector targeting the desired .zapload element.

The isInViewport function calculates the bounding rectangle of an element and checks if it intersects with the visible viewport area, enabling efficient lazy loading based on visibility.

You Might Be Interested In:


Leave a Reply