Focus on IntersectionObserver

.babelrc

@@ -0,0 +1,12 @@
+{
+    "presets": ["es2015"],
+    "env": {
+        "production": {
+            "presets": [
+                ["minify", {
+                    "mangle": false
+                }]
+            ]
+        }
+    }
+}

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+indent_size = 4

.eslintrc

@@ -0,0 +1,28 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true,
+        "amd": true,
+        "es6": true,
+        "node": true
+    },
+    "rules": {
+        "comma-dangle": 1,
+        "quotes": [1, "single"],
+        "no-undef": 2,
+        "global-strict": 0,
+        "indent": [1, 2, {
+            "SwitchCase": 1
+        }],
+        "no-extra-semi": 1,
+        "no-underscore-dangle": 0,
+        "no-console": 1,
+        "no-unused-vars": 1,
+        "no-trailing-spaces": [1, {
+            "skipBlankLines": true
+        }],
+        "no-unreachable": 1,
+        "no-alert": 0,
+        "semi": 1
+    }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+yarn-error.log

.jshintrc

@@ -0,0 +1,3 @@
+{
+    "esversion": 6
+}

README.md

@@ -24,6 +24,8 @@ bower install responsively-lazy
 ```
 
 The library does not have any dependencies, and it's just 1.1kb gzipped and minified.
+If the browser lacks support for `MutationObserver` and/or `IntersectionObserver`, they will be fetched from https://polyfill.io automatically.
+
 
 ## Usage
 
@@ -37,6 +39,12 @@ The library does not have any dependencies, and it's just 1.1kb gzipped and mini
 <script async src="responsivelyLazy.min.js"></script>
 ```
 
+* You can modify the the intersection boundaries, the root element and the threshold by defining a configuration object, just before including the library. For further information, please read the [API documentation for IntersectionObserver at the Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+```html
+<script>var responsivelyLazyConfig = {rootMargin: '0px 0px', threshold: 0.8}</script>
+<script async src="responsivelyLazy.min.js"></script>
+```
+
 * Add the following code for each image
 ```html
 <div class="responsively-lazy" style="padding-bottom:68.44%;">
@@ -66,7 +74,7 @@ The lazy loading works in browsers supporting the srcset attribute. As of Decemb
 
 ## DOM changes
 
-The library will listen for DOM changes and you can also trigger visible images loading by calling `responsivelyLazy.run()`.
+The library will listen for DOM changes and find dynamically created images and observe them automatically.
 
 ## License
 Free to use under the [MIT license](http://opensource.org/licenses/MIT).

package.json

@@ -9,6 +9,10 @@
         "email": "[email protected]",
         "url": "http://ivopetkov.com/"
     },
+    "contributors": [{
+        "name": "Silvio Ginter",
+        "email": "[email protected]"
+    }],
     "repository": {
         "type": "git",
         "url": "https://github.com/ivopetkov/responsively-lazy"
@@ -22,10 +26,21 @@
         "responsive",
         "seo"
     ],
-    "licenses": [
-        {
-            "type": "MIT",
-            "url": "http://opensource.org/licenses/MIT"
-        }
-    ]
-}
+    "licenses": [{
+        "type": "MIT",
+        "url": "http://opensource.org/licenses/MIT"
+    }],
+    "scripts": {
+        "build:js": "npx babel src/ --out-file lib/responsivelyLazy.min.js",
+        "build:prod": "BABEL_ENV=production npm run build:js"
+    },
+    "devDependencies": {
+        "babel-cli": "^6.26.0",
+        "babel-eslint": "^7.1.1",
+        "babel-minify": "0.4.3",
+        "babel-plugin-transform-undefined-to-void": "^6.9.4",
+        "babel-preset-env": "^1.7.0",
+        "babel-preset-minify": "^0.4.3",
+        "babel-preset-es2015": "^6.24.1"
+    }
+}