element: CSS String | NodeList | Element (optional) – loads all images if not set

Not a framework, not a library, just a function (with clean af markup).

A lazy image loader designed to enforce progressive enhancement and valid HTML.

Any attributes the noscript image has ( srcset , class , id , alt , etc) are kept.

By default, the function targets every noscript element on the page.

Declare a lazy image like this:

Other lazy loaders promote invalid HTML by omitting the src attribute, or aren't compatible for users without javascript.

You can specify what images to load by passing a parameter into loadMedia of either

This may help animate the image by styling it onload.

You can hook an onload function for every loaded image.

Scroll-Based Loading

There's a default function to load images when they're scrolled into view.

This is a general solution, creating your own scroll-based loading functionality may be more performant.