From 103d748bc579140c6946117a4a3cb67653726091 Mon Sep 17 00:00:00 2001
From: Apoorv Saxena <asaxena001@gmail.com>
Date: Sat, 23 Sep 2017 11:27:12 +0530
Subject: [PATCH] Responsive image support + Misc (#35)

* added support for responsive images

* replaced images with progressive JPEGs

* fixed lint issues
---
 README.md                 |  12 ++++++++++--
 banner/lozad-banner.jpg   | Bin 0 -> 106479 bytes
 banner/lozad-banner.png   | Bin 294424 -> 0 bytes
 demo/images/lozad.jpg     | Bin 0 -> 40647 bytes
 demo/images/lozad.png     | Bin 111435 -> 0 bytes
 demo/images/thumbs/01.jpg | Bin 8450 -> 6459 bytes
 demo/images/thumbs/02.jpg | Bin 8272 -> 5901 bytes
 demo/images/thumbs/03.jpg | Bin 7076 -> 5992 bytes
 demo/images/thumbs/04.jpg | Bin 8360 -> 6948 bytes
 demo/images/thumbs/05.jpg | Bin 7890 -> 5735 bytes
 demo/images/thumbs/06.jpg | Bin 7954 -> 6422 bytes
 demo/images/thumbs/07.jpg | Bin 7609 -> 6203 bytes
 demo/images/thumbs/08.jpg | Bin 6876 -> 5718 bytes
 demo/images/thumbs/09.jpg | Bin 8281 -> 6262 bytes
 demo/images/thumbs/10.jpg | Bin 8201 -> 6687 bytes
 demo/images/thumbs/11.jpg | Bin 11152 -> 9457 bytes
 demo/images/thumbs/12.jpg | Bin 7499 -> 6219 bytes
 demo/index.html           |   4 ++--
 src/lozad.js              |   9 +++++++--
 19 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 banner/lozad-banner.jpg
 delete mode 100644 banner/lozad-banner.png
 create mode 100644 demo/images/lozad.jpg
 delete mode 100644 demo/images/lozad.png

diff --git a/README.md b/README.md
index ccc6f46..3ba7a8f 100644
--- a/README.md
+++ b/README.md
@@ -2,13 +2,14 @@
 
 > 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 loading javascript library](./banner/lozad-banner.jpg "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 :)
-- allows lazy loading of dynamically added elements as well.
+- allows lazy loading of dynamically added elements as well,
+- supports responsive images
 
 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.
 
@@ -111,6 +112,13 @@ observer.observe();
 // ... code to dynamically add elements
 observer.observe(); // observes newly added elements as well
 ```
+
+for use with responsive images
+
+```html
+<!-- responsive image example -->
+<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w" />
+```
 ## 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).
diff --git a/banner/lozad-banner.jpg b/banner/lozad-banner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2698760756745f1303c08cde9c08445ae7cc8ff6
GIT binary patch
diff --git a/banner/lozad-banner.png b/banner/lozad-banner.png
deleted file mode 100644
index 50d201c32a857b3fda3ab39da144772f6fc0124e..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/demo/images/lozad.jpg b/demo/images/lozad.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2bb0485209e7fe73edeb6dc43c93cece930fd8df
GIT binary patch
diff --git a/demo/images/lozad.png b/demo/images/lozad.png
deleted file mode 100644
index c1bf52c6a6e9907c96fdbe116372d1d80aa03831..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/demo/images/thumbs/01.jpg b/demo/images/thumbs/01.jpg
index 2d76f909c4162d8b565b03faf425598207ab2b70..6816fd0831a9004bdebb7b304a91036e7b3b4aca 100644
GIT binary patch
diff --git a/demo/images/thumbs/02.jpg b/demo/images/thumbs/02.jpg
index ca2293bf3ff1553902e28a13818222654d7f369b..cdb4ae4ace3a4b823163a8aa7c2efdc7e0c92ba2 100644
GIT binary patch
diff --git a/demo/images/thumbs/03.jpg b/demo/images/thumbs/03.jpg
index 49adcbb17c4e5ac3a7d4d9682206cb5bec07c2d2..38f29cb0fe7fdd1675b6cbea3b22e14569fe68f0 100644
GIT binary patch
diff --git a/demo/images/thumbs/04.jpg b/demo/images/thumbs/04.jpg
index 2709ceda5e7ce5d05ed22731c80fe9fe41abc451..41df78324ea8d112002797dc272b476130ced1d5 100644
GIT binary patch
diff --git a/demo/images/thumbs/05.jpg b/demo/images/thumbs/05.jpg
index f60dbdab9643a2edcc81607bad7328e1140779fd..f930cab99c68ccdbf16ed573c11ee10ad8840087 100644
GIT binary patch
diff --git a/demo/images/thumbs/06.jpg b/demo/images/thumbs/06.jpg
index c13df483e5e7a2605a41b948a1da3bf3a7175456..c9f2bcd3e9e75decc18f44416f5816edd19969f4 100644
GIT binary patch
diff --git a/demo/images/thumbs/07.jpg b/demo/images/thumbs/07.jpg
index df2a6dc422311e6bfd341de69c5ee87003606b9d..a80db6e559c89ca39fd83b63c55c0e243c7b6aca 100644
GIT binary patch
diff --git a/demo/images/thumbs/08.jpg b/demo/images/thumbs/08.jpg
index d81265c9c07eddba582fa87c10bbb36572950afb..c177a9e082f671685b83b923d3a28b52d0f05dc2 100644
GIT binary patch
diff --git a/demo/images/thumbs/09.jpg b/demo/images/thumbs/09.jpg
index 96d59bd2290f8deaf1a604fff6747e5009ebd8d0..031914c145d929357778dbcfc79dbc9121e0aae2 100644
GIT binary patch
diff --git a/demo/images/thumbs/10.jpg b/demo/images/thumbs/10.jpg
index 61e56a67113ac116c004adcf1c89443bbbe8c5eb..926d68b9c34fcfd99ae9e760a5a91fd956ad3f47 100644
GIT binary patch
diff --git a/demo/images/thumbs/11.jpg b/demo/images/thumbs/11.jpg
index 966bb18e3cb8c6ee583cbda7aa311341260e1949..cfc328ff0e6d13a352564b6f8b09945dbe0264d1 100644
GIT binary patch
diff --git a/demo/images/thumbs/12.jpg b/demo/images/thumbs/12.jpg
index d8add9659aab573f913034f968500365b3ffe05d..4c8c082df2cc1171e870e14831d3644182dc8474 100644
GIT binary patch
diff --git a/demo/index.html b/demo/index.html
index 53d45a8..4b91b0b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -11,7 +11,7 @@
     <meta charset="utf-8" />
     <meta name="description" content="Lozad.js is highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-    <link rel="image_src" href="images/lozad.png"/>
+    <link rel="image_src" href="images/lozad.jpg"/>
     <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
     <link rel="stylesheet" href="assets/css/main.css" />
     <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
@@ -19,7 +19,7 @@
     <meta property="og:title" content="Lozad.js: Highly performant lazy loader" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://apoorv.pro/lozad.js/demo/" />
-    <meta property="og:image" content="https://apoorv.pro/lozad.js/demo/images/lozad.png" />
+    <meta property="og:image" content="https://apoorv.pro/lozad.js/demo/images/lozad.jpg" />
     <meta property="og:description" content="Lozad.js is highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more." />
 </head>
 
diff --git a/src/lozad.js b/src/lozad.js
index 111e2a6..62c2de8 100644
--- a/src/lozad.js
+++ b/src/lozad.js
@@ -2,7 +2,12 @@ const defaultConfig = {
   rootMargin: '0px',
   threshold: 0,
   load(element) {
-    element.src = element.dataset.src
+    if (element.dataset.src) {
+      element.src = element.dataset.src
+    }
+    if (element.dataset.srcset) {
+      element.srcset = element.dataset.srcset
+    }
   }
 }
 
@@ -37,7 +42,7 @@ export default function (selector = '.lozad', options = {}) {
     observe() {
       const elements = document.querySelectorAll(selector)
       for (let i = 0; i < elements.length; i++) {
-        if(isLoaded(elements[i])) {
+        if (isLoaded(elements[i])) {
           continue
         }
         if (observer) {
