Responsively Lazy v3 examples

More information about the JavaScript library is available at

Lazy load images

In the examples bellow you'll find multiple div tags with various sizes. When the image inside each div becomes visible on the screen, the best version is selected and loaded. The available versions widths are 500px, 800px, 1500px and 2500px. You can easily see which version is loaded via the text inside the image.
max-width: 400px
With data-on-responsively-lazy-load
With "responsively-lazy-load" event handler
max-width: 500px (no aspect-ratio specified)
In scrollable element
Hidden (must call

Lazy load HTML

Add data-responsively-lazy-type=html to tell the library that the value in data-responsively-lazy is HTML.
Simple example
HTML with JavaScript code inside
View source at GitHub