This is the new version. New API. New features.

Author: ivopetkov

README.md

@@ -1,75 +1,102 @@
 # Responsively Lazy
 
-**The best lazy loading implementation available.**
+**Probably the best lazy loading implementation available.**
 
-- Handles responsive images
+- Perfect for responsive images
 - Truly lazy (absolutely no unnecessary requests)
 - **SEO friendly** (valid HTML)
-- Supports [WebP](https://en.wikipedia.org/wiki/WebP)
+- Supports [WebP](https://en.wikipedia.org/wiki/WebP) and [AVIF](https://en.wikipedia.org/wiki/AVIF)
+- Customizable load threshold
+- Lazy load HTML
 
 <p align="center">
-<img src="http://ivopetkov.github.io/responsivelyLazy/poster.jpg" style="max-width:100%;">
+<img src="https://ivopetkov.github.io/responsively-lazy-v3/poster.jpg" style="max-width:100%;">
 </p>
 
-You can find a demo at [http://ivopetkov.github.io/responsivelyLazy/](http://ivopetkov.github.io/responsivelyLazy/) and learn how the magic works at [http://ivopetkov.com/b/lazy-load-responsive-images/](http://ivopetkov.com/b/lazy-load-responsive-images/)
+You can find a demo at [ivopetkov.github.io/responsively-lazy-v3/](https://ivopetkov.github.io/responsively-lazy-v3/) and learn how the magic works at [ivopetkov.com/responsively-lazy/](https://ivopetkov.com/responsively-lazy/)
 
 ## Download and install
 
-Download the minified [css](https://raw.githubusercontent.com/ivopetkov/responsively-lazy/master/responsivelyLazy.min.css) and [js](https://raw.githubusercontent.com/ivopetkov/responsively-lazy/master/responsivelyLazy.min.js) files or install through [npm](https://www.npmjs.com/) and [bower](http://bower.io/)
+Download the minified [JS file](https://raw.githubusercontent.com/ivopetkov/responsively-lazy/master/responsively-lazy.min.js) or install via [npm](https://www.npmjs.com/).
 ```
 npm install responsively-lazy
 ```
+
+The library does not have any dependencies, and it's just 2.5kb when gzipped and minified.
+
+## Usage
+
+* Include the JS file in the head of the document
+```html
+<script async src="responsively-lazy.min.js"></script>
 ```
-bower install responsively-lazy
+
+* Add the following code for each image
+```html
+<img src="images/2500.jpg" style="width:100%;aspect-ratio:400/274;" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-responsively-lazy="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w" />
 ```
+Values to customize:
 
-The library does not have any dependencies, and it's just 1.1kb gzipped and minified.
+**aspect-ratio**
 
-## Usage
+The aspect ratio of the image (width/height) to reserve space. Skip if you don't know it.
+
+**src**
+
+The default (largest) image size. Will be used by very old browsers, search engines, social networks, etc.
+
+**data-responsively-lazy** (the star of the show)
+
+Must contain a list of image versions separated by commas. Each version must contain a path to the image and its size. Optionaly you can specify the file type (webp or avif). The first supported format for the selected width is used.
 
-* Include the css file in the head tag
 ```html
-<link rel="stylesheet" href="responsivelyLazy.min.css">
+data-responsively-lazy="images/400.avif 400w avif, images/400.webp 400w webp, images/400.jpg 400w, ..."
 ```
 
-* Include the js file right before the end of the body tag 
+**data-responsively-lazy-threshold**
+
+Specify how close to the viewport an image should be to start loading.
 ```html
-<script async src="responsivelyLazy.min.js"></script>
+data-responsively-lazy-threshold="500px" // can use percents too
 ```
 
-* Add the following code for each image
+**data-responsively-lazy-type=html**
+
+Lazy load HTML. Can contain JavaScript.
+
 ```html
-<div class="responsively-lazy" style="padding-bottom:68.44%;">
-    <img alt="" src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
-</div>
+<div data-responsively-lazy-type="html" data-responsively-lazy="hello world"></div>
 ```
-The things to customize are the **padding-bottom** style, and the values of the **src** and **data-srcset** attributes. If you don't know the image aspect ratio you can skip the div tag and move the responsively-lazy class to te img tag:
+
+**data-responsively-lazy-type=background**
+
+Lazy load image as a background image.
+
 ```html
-<img class="responsively-lazy" alt="" src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
+<div data-responsively-lazy-type="background" data-responsively-lazy="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w"></div>
 ```
-You can list image versions in the [WebP format](https://en.wikipedia.org/wiki/WebP) which will be used if the browser supports it.
 
 ## A new concept
 
-Responsively Lazy is very different from the other lazy loading libraries. They make you break your HTML by removing the `src` attribute, or make you put tiny version there or make you use `<noscript>` to make your images appear in Google Images. The following code has worked for ages: 
+Responsively Lazy is very different from the other lazy loading libraries. Others make you break your HTML by removing the `src` attribute, or make you put some tiny version there, or make you use `<noscript>` to make your images appear in search engines (like Google Images). The following code has worked for ages: 
 ```html
 <img src="image.jpg" />
 ```
 Let's not break it when we can enhance it.
 ```html
-<img src="image.jpg" data-src="image-200.jpg 200w, image-400.jpg 400w" srcset="..." />
+<img src="image.jpg" data-responsively-lazy="image-200.jpg 200w, image-400.jpg 400w" srcset="..." />
 ```
 
 ## Browser support
 
-The lazy loading works in browsers supporting the srcset attribute. As of December 2017 that's [86.78%](http://caniuse.com/#feat=srcset). Unsupported browsers will load the image in the src attribute. That's the image search engines and social networks will find, so it's better to make it high resolution.
+The lazy loading works in browsers supporting the srcset attribute and JavaScript. As of December 2023 that's [97.6%](https://caniuse.com/#feat=srcset). Unsupported browsers will load the image in the src attribute. That's the image search engines and social networks will find, so it's better to make it high resolution.
 
 ## DOM changes
 
 The library will listen for DOM changes and you can also trigger visible images loading by calling `responsivelyLazy.run()`.
 
 ## License
-Free to use under the [MIT license](http://opensource.org/licenses/MIT).
+Free to use under the [MIT license](https://opensource.org/licenses/MIT).
 
 ## Got questions?
-You can find me at [@IvoPetkovCom](https://twitter.com/IvoPetkovCom) and [ivopetkov.com](http://ivopetkov.com)
+You can find me at [@IvoPetkovCom](https://twitter.com/IvoPetkovCom) and [ivopetkov.com](https://ivopetkov.com)

bower.json

@@ -1,7 +1,7 @@
 {
     "name": "responsively-lazy",
     "title": "Responsively Lazy",
-    "version": "2.0.2",
+    "version": "3.0.0",
     "description": "Lazy load responsive images",
     "homepage": "http://ivopetkov.com/b/lazy-load-responsive-images/",
     "author": {