Responsively Lazy v3 examples
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
data-responsively-lazy-threshold=500px
data-responsively-lazy-threshold=50%
data-responsively-lazy-type=background
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 responsivelyLazy.run())
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
