Lazyload.js

Lazyload.js is one of my open sources projects built absolutely from scrach. It’s an Ipen Source JavaScript library that can lazy load any kind of web content or html fragment in your website.

Tired of JS libraries that only work for images?

I took the project to build this library because I was tired of packages that only worked to lazyload images. Really? I don’t need a library to just change an <img random-src-attribute="xyz" /> to <img src="xyz" /> when the user scroll is going to make the image visible

Lazyload.js detects viewport and user scrolling and allows you to lazy load:

  • Images.
  • HTML nodes.
  • IFrames.
  • And whatever you want.

You can see it live, loading all kind of content, at TopBoats.com.

Screenshots

The images below show it working:

  1. At first, there is no content.
  2. Then, the AJAX configured to ask for the lazyloaded HTML is fired.
  3. The AJAX finishes and the HTML is painted.
  4. This HTML includes images that also lazyload.
  5. The images are lazy-loaded.

At first, there is no content Then, an AJAX to retrieve HTML is fired The HTML fires... which includes images that also lazyload The images are loaded