updated README

ApoorvSaxena · Sep 9, 2017 · 0ba7eae · 0ba7eae
1 parent bcc7735
commit 0ba7eae
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 29 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Apoorv Saxena
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,27 +1,34 @@
-Lozad [![npm version](https://badge.fury.io/js/lozad.svg)](https://badge.fury.io/js/lozad)
-=====
-*Advanced performant Lazy Loader using Intersection Observer API*
-***
+# Lozad.js [![npm version](https://badge.fury.io/js/lozad.svg)](https://badge.fury.io/js/lozad)
+
+> Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
 
 ![lozad.js lazy loading javascript library](./banner/lozad-banner.png "lozad.js lazy loading javascript library")
 
+**Lozad.js**:
+- lazy loads elements performantly using pure JavaScript,
 - is a light-weight library, *just **535 bytes*** minified & gzipped,
 - has NO DEPENDENCIES :)
-- lazy loads elements performantly using pure JavaScript.
+- allows lazy loading of dynamically added elements as well.
 
-It is written with an aim to lazy load images, ads, videos or any other element using the recently added [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) with tremendous performance benefits.
+It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) with tremendous performance benefits.
 
-Yet another Lazy Loading JavaScript library, why?
------
-Existing lazy loading libraries hook up the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.
+## Table of Contents
 
-Making this more efficient and performant is what [IntersectionObserver](https://developers.google.com/web/updates/2016/04/intersectionobserver) is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
+- [Demo](https://apoorv.pro/lozad.js/demo/)
+- [Background](#yet-another-lazy-loading-javascript-library-why)
+- [Get started](#get-started)
+- [Usage](#usage)
+- [Browser Support](#browser-support)
+- [Contribute](#contribute)
+- [Changelog](#changelog)
+- [License](#license)
 
-[Demo](https://apoorv.pro/lozad.js/demo/index.html)
------
+## Yet another Lazy Loading JavaScript library, why?
+Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call `getBoundingClientRect()` on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to `getBoundingClientRect()` forces the browser to re-layout the entire page and will introduce considerable jank to your website.
+
+Making this more efficient and performant is what [IntersectionObserver](https://developers.google.com/web/updates/2016/04/intersectionobserver) is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
 
-Get Started
------
+## Get Started
 
 Get the library using one of the following ways:
 
@@ -51,10 +58,9 @@ or
 <script type="text/javascript" src="lozad.min.js"></script>
 ```
 
-**Note**: **lozad.js** supports AMD and commonJS module pattern out of the box.
+**Note**: `lozad.js` supports AMD and commonJS module pattern out of the box.
 
-Usage
------
+## Usage
 
 In HTML, add an identifier to the element (default selector identified is `lozad` class):
 ```html
@@ -63,14 +69,14 @@ In HTML, add an identifier to the element (default selector identified is `lozad
 
 All you need to do now is just instantiate Lozad as follows:
 ```js
-const observer = lozad(); // lazy loads elements with selector as '.lozad'
+const observer = lozad(); // lazy loads elements with default selector as '.lozad'
 observer.observe();
 ```
 or with custom options:
 ```js
 const observer = lozad('.lozad', {
     rootMargin: '10px 0px', // syntax similar to that of CSS Margin
-    threshold: 0.1 // ratio of image convergence
+    threshold: 0.1 // ratio of element convergence
 });
 observer.observe();
 ```
@@ -100,25 +106,20 @@ observer.observe();
 // ... code to dynamically add elements
 observer.observe(); // observes newly added elements as well
 ```
-Browser Support
------
+## Browser Support
 
 Available in [latest browsers](http://caniuse.com/#feat=intersectionobserver). If browser support is not available, then make use of this [polyfill](https://www.npmjs.com/package/intersection-observer).
 
-Contributing
------
+## Contribute
 
 Interested in contributing features and fixes?
 
 [Read more on contributing](./CONTRIBUTING.md).
 
-Changelog
------
+## Changelog
 
 See the [Changelog](https://github.com/ApoorvSaxena/lozad.js/wiki/Changelog)
 
-License
------
+## License
 
-Copyright (c) 2017 Apoorv Saxena, https://apoorv.pro
-Licensed under the [MIT license](http://opensource.org/licenses/MIT).
+[MIT](LICENSE) © [Apoorv Saxena](https://apoorv.pro)