Lazy Load Images/Backgrounds/Iframes With JavaScript – TinyLazyLoad

Preview:

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:

• 10 Best Lazy Loading JavaScript Libraries

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>