Merge pull request #26 from shinsenter/develop

Bug fix
shinsenter · Apr 17, 2019 · a448df5 · a448df5
2 parents 5c3737c + 280d67e
commit a448df5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -3,15 +3,14 @@
 🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website.
 
 
-![HitCount](http://hits.dwyl.com/shinsenter/defer.js.svg)
 ![GitHub](https://img.shields.io/github/license/shinsenter/defer.js.svg)
+![GitHub Release Date](https://img.shields.io/github/release-date/shinsenter/defer.js.svg)
 
 [![CodeFactor](https://www.codefactor.io/repository/github/shinsenter/defer.js/badge)](https://www.codefactor.io/repository/github/shinsenter/defer.js)
+![GitHub issues](https://img.shields.io/github/issues-raw/shinsenter/defer.js.svg)
 ![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/shinsenter/defer.js.svg)
 [![Post an issue](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/shinsenter/defer.js/issues)
-![GitHub issues](https://img.shields.io/github/issues-raw/shinsenter/defer.js.svg)
 
-![GitHub Release Date](https://img.shields.io/github/release-date/shinsenter/defer.js.svg)
 ![npm](https://img.shields.io/npm/v/@shinsenter/defer.js.svg)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@shinsenter/defer.js.svg)
 [![jsDelivr hits (GitHub)](https://data.jsdelivr.com/v1/package/npm/@shinsenter/defer.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@shinsenter/defer.js)
@@ -244,7 +243,7 @@ In order to lazy-load your content, you must use some `data-` attributes instead
 Put this script anywhere you want within the `<body>` tag:
 
 ```html
-<script>deferimg('img[data-src], source[data-src]')</script>
+<script>deferimg('img[data-src],picture,video,audio')</script>
 ```
 
 

diff --git a/dist/defer_plus.min.js b/dist/defer_plus.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shinsenter/defer.js",
-  "version": "1.1.7",
+  "version": "1.1.7b",
   "description": "🥇 A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Defer almost anything, easily speed up your website. https://github.com/shinsenter/defer.js",
   "homepage": "https://github.com/shinsenter/defer.js#readme",
   "author": "Mai Nhut Tan <shin@shin.company>",

diff --git a/src/extensions.js b/src/extensions.js
@@ -40,40 +40,44 @@
     var deferimg_fn     = 'deferimg';
     var deferiframe_fn  = 'deferiframe';
 
+    // IntersectionObserver class
     var OBSERVER_CLASS  = 'IntersectionObserver';
 
     // Real attributes for lazy-loaded media
     var ATTR_SRC    = 'src';
     var ATTR_SRCSET = 'srcset';
     var ATTR_STYLE  = 'style';
-    var ATTR_DATA   = 'data';
     var ATTR_TYPE   = 'type';
 
     // Tag names
     var IFRAME  = 'IFRAME';
     var IMG     = 'IMG';
     var LINK    = 'LINK';
+    var SOURCE  = 'SOURCE';
 
     // Tag attributes
     var APPLIED_CLASS       = 'lazied';
     var DATASET_PREFIX      = 'data-';
     var APPLIED_SELECTOR    = DATASET_PREFIX + APPLIED_CLASS;
 
+    // Element methods
+    var LOAD                = 'load';
     var FOR_EACH            = 'forEach';
+    var APPEND_CHILD        = 'appendChild';
     var GET_ATTRIBUTE       = 'getAttribute';
     var SET_ATTRIBUTE       = 'setAttribute';
     var REMOVE_ATTRIBUTE    = 'removeAttribute';
-    var APPEND_CHILD        = 'appendChild'
 
     // Common used constants
-    var FALSE   = false;
+    var HEAD    = document.head;
     var NOOP    = Function();
+    var FALSE   = false;
     var defer   = window.defer || NOOP;
-    var dom     = defer.dom || NOOP;
+    var dom     = defer.dom    || NOOP;
 
     // Query selector
-    function query(selector) {
-        return [].slice.call(document.querySelectorAll(selector));
+    function query(selector, parent) {
+        return [].slice.call((parent || document).querySelectorAll(selector));
     }
 
     /**
@@ -116,18 +120,23 @@
                 // This method sets the real attributes
                 function display(media) {
                     if ((callback || NOOP).call(media, media) !== FALSE) {
-                        (attributes || [ATTR_SRCSET, ATTR_SRC, ATTR_DATA, ATTR_STYLE])[FOR_EACH](function(attr, value) {
+                        query(SOURCE, media)[FOR_EACH](display);
+
+                        (attributes || [ATTR_SRCSET, ATTR_SRC, ATTR_STYLE])[FOR_EACH](function(attr, value) {
                             value = media[GET_ATTRIBUTE](DATASET_PREFIX + attr);
                             if (value) {media[attr] = value}
                         });
+
+                        if (LOAD in media) {media[LOAD]();}
                     }
+
                     media.className += ' ' + (lazied_class || APPLIED_CLASS);
                 }
 
                 // Force using IntersectionObserver when posible
                 // It class is the heart of media lazy-loading
                 if (OBSERVER_CLASS in window) {
-                    observer = new window[OBSERVER_CLASS](function(items) {
+                    observer = window[OBSERVER_CLASS](function(items) {
                         items[FOR_EACH](function(item, target) {
                             if (item.isIntersecting && (target = item.target)) {
                                 observer.unobserve(target);
@@ -152,8 +161,6 @@
      * @returns {void}
      */
     function defersmart() {
-        var head = document.head;
-
         function loadscript(scripts, tag, base, attr) {
             base    = 'script[type=deferjs]';
             attr    = '[async]';
@@ -174,9 +181,9 @@
 
                     if (tag[ATTR_SRC] && !tag.hasAttribute('async')) {
                         tag.onload = tag.onerror = appendtag
-                        head[APPEND_CHILD](tag);
+                        HEAD[APPEND_CHILD](tag);
                     } else {
-                        head[APPEND_CHILD](tag);
+                        HEAD[APPEND_CHILD](tag);
                         defer(appendtag, 0.1);
                     }
                 }