Responsive image support + Misc (#35)

* added support for responsive images * replaced images with progressive JPEGs * fixed lint issues
ApoorvSaxena · Sep 23, 2017 · 103d748 · 103d748
1 parent 83466d8
commit 103d748
Show file tree

Hide file tree

Showing 19 changed files with 19 additions and 6 deletions.
diff --git 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
diff --git a/banner/lozad-banner.png b/banner/lozad-banner.png
diff --git a/demo/images/lozad.jpg b/demo/images/lozad.jpg
diff --git a/demo/images/lozad.png b/demo/images/lozad.png
diff --git a/demo/images/thumbs/01.jpg b/demo/images/thumbs/01.jpg
diff --git a/demo/images/thumbs/02.jpg b/demo/images/thumbs/02.jpg
diff --git a/demo/images/thumbs/03.jpg b/demo/images/thumbs/03.jpg
diff --git a/demo/images/thumbs/04.jpg b/demo/images/thumbs/04.jpg
diff --git a/demo/images/thumbs/05.jpg b/demo/images/thumbs/05.jpg
diff --git a/demo/images/thumbs/06.jpg b/demo/images/thumbs/06.jpg
diff --git a/demo/images/thumbs/07.jpg b/demo/images/thumbs/07.jpg
diff --git a/demo/images/thumbs/08.jpg b/demo/images/thumbs/08.jpg
diff --git a/demo/images/thumbs/09.jpg b/demo/images/thumbs/09.jpg
diff --git a/demo/images/thumbs/10.jpg b/demo/images/thumbs/10.jpg
diff --git a/demo/images/thumbs/11.jpg b/demo/images/thumbs/11.jpg
diff --git a/demo/images/thumbs/12.jpg b/demo/images/thumbs/12.jpg
diff --git a/demo/index.html b/demo/index.html
@@ -11,15 +11,15 @@
     <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]-->
     <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
     <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
@@ -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) {