Lazy Load Images/Backgrounds/Iframes With JavaScript – TinyLazyLoad

Category: Javascript , Loading | April 6, 2022
Author:metinsaylan
Views Total:136 views
Official Page:Go to website
Last Update:April 6, 2022
License:MIT

Preview:

Lazy Load Images/Backgrounds/Iframes With JavaScript – TinyLazyLoad

Description:

A really simple and lightweight JavaScript lazy load library that supports images, iframes, and background images.

One of the most noticeable things that affect the performance of a webpage is the network loading of resources. With web pages using more and more resources, it’s important to load only what’s necessary at any given moment.

The goal of the TinyLazyLoad library is to speed up page load times by decreasing HTTP requests for images and iframes.

It uses Intersection Observer API to detect visible images and iframes and supports both desktop & mobile.

See Also:

How to use it:

1. Download and import the TinyLazyLoad library.

<script src="tinylazyload.js"></script>

2. Add the CSS class lazy to images and iframes within the document.

<img class="lazy" />
<div class="lazy"></div>
<iframe class="lazy"></iframe>

3. Use data-src attribute for images and iframes:

<img class="lazy" src="" data-src="1.jpg" />
<iframe src="" class="lazy" data-src="https://www.youtube.com/embed/HG92yUC59Nk"></iframe>

4. Use data-src-background attribute for background images:

<div class="lazy" data-src-background="1.jpg">
  ...
</div>

You Might Be Interested In:


Leave a Reply