diff --git a/README.md b/README.md index f7ef6642..2ee4dc47 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,33 @@ #lazysizes **lazysizes** is a fast (jankfree) lazyloader for images (including responsive images), iframes and scripts/widgets without any dependency. +##Features + +* supports standard conform **responsive images** (``srcset`` and ``picture``) +* loads ``iframes`` and ``script`` +* Optional **automatic ``sizes`` attribute calculation** for your repsonsive images (simply add ``data-sizes="auto"``). respimg was never so easy. +* **easy to use** / no configuration required: + * no configuration required for scrollable areas (overflow: auto/scroll) + * no configuration or callback invocation required for any kind of JS widgets (tabs, carousels, accordions, dialogs) or any JS behaviors (i.e.: infinite scroll/AJAX) +* performance and memory optimized +* **absolutley jankfree** (decoding an image or parsing an iframe might create a jank, but the script itself will never ever, even if you had thounds of images to lazy load on one page) +* uses the low quality image placeholder pattern, if an image already has a valid source +* JS off syntax possible +* lightweight only 2kb + ##Download and Embed Simply download the [lazysizes.min.js](lazysizes.min.js) and include it in your webpage: ```html - + ``` ##[Demo with code examples](http://afarkas.github.io/lazysizes/#examples) can be seen [here](http://afarkas.github.io/lazysizes/#examples). ##API -lazysizes comes with a simple markup and JS API: +**lazysizes** comes with a simple markup and JS API: ###Markup API Simply add the ``class`` ``lazyload`` to all ``img`` and ``iframe`` elements, which should be loaded lazy. Instead of a ``src`` or ``srcset`` attribute, use a ``data-src`` or ``data-srcset`` attribute: @@ -24,24 +38,24 @@ Simply add the ``class`` ``lazyload`` to all ``img`` and ``iframe`` elements, wh ``` -As a nice bonus lazysizes supports setting the ``sizes`` attribute automatically corresponding to the current size of your image. To add support for this add the value ``auto`` to the ``data-sizes`` attribute: +**lazysizes** supports setting the ``sizes`` attribute automatically corresponding to the current size of your image. To add support for this add the value ``auto`` to the ``data-sizes`` attribute: ```html ``` -**How sizes is calculated**: The automatic sizes calculation takes the with of the image and the width of its parent element and uses the largeest number of those two calculated numbers. It's therefore important, that all images are contained in a wrapper that isn't much bigger than the image should shown. Otherwise a wrong (too big) sizes attribute will be calculated. +**Important: How ``sizes`` is calculated**: The automatic sizes calculation takes the width of the image and the width of its parent element and uses the largest number of those two calculated numbers. It's therefore important, that all images are contained in a wrapper that isn't much bigger than the image should shown. Otherwise a wrong (too big) sizes attribute will be calculated. For JS off support simply use a ``span`` or ``div`` element as a wrapper for a ``noscript`` element: ```html