A small JavaScript image lazy loading library with Intersection Observer

io-lazyload is an extremely fast JavaScript library for lazy loading images that uses IntersectionObserver API to handle image position detection. IntersectionObserver is a fairly new web API that makes lazy loading images extremely easy. How easy is to to lazy load with IntersectionObserver? You can do it in about ≈20 lines of code if you don’t need a polyfill.

Libraries

Load the following libraries on page.

HTML

Add the class of lazyload to the image(s) you wish to lazyload and
modify the src attribute to read data-src

JS

Initialize the script before the closing body tag (or in your own JS file)

lazy load all images with the class ‘lazy’

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by cdowdy. Visit their official github repository for more information and follow for future updates.