Merge pull request #7 from shinsenter/develop

Use query selector for deferimg and deferiframe methods
shinsenter · Feb 22, 2019 · e7f8df9 · e7f8df9
2 parents 6145b8b + 67ea1ef
commit e7f8df9
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 23 deletions.
diff --git a/.src/demo.html b/.src/demo.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title>Easily lazy-load JS, CSS, images, iframes - @shinsenter / defer.js</title>
-    <script src="defer_plus.min.js?v=wip-1.0.6"></script>
+    <script src="defer_plus.min.js?v=wip-1.0.7"></script>
     <meta name="description" content="defer.js by shinsenter is a super tiny script to efficiently load JavaScript. Extended version supports CSS files, images and iframes. They are all easy to use.">
     <meta name="keywords" content="defer.js,defer,lazyload,fast,pagespeed,javascript,css,style,image,iframe">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -293,11 +293,11 @@ <h2>Easiest way to lazy-load images</h2>
     width="400" height="300" alt="Random image" /&gt;
 
 &lt;script type="text/javascript"&gt;
-deferimg('basic', 100);
+deferimg('img.basic', 100);
 &lt;/script&gt;</code></pre>
             </div>
             <script>
-                deferimg('basic', 100);
+                deferimg('img.basic', 100);
             </script>
         </div>
         <div class="long-content"></div>
@@ -360,15 +360,15 @@ <h2>Lazy-load images with CSS effect</h2>
 
 
 &lt;script type="text/javascript"&gt;
-deferimg('fade', 100, 'loaded', function(img) {
+deferimg('img.fade', 100, 'loaded', function(img) {
     img.onload = function() {
         img.classList.add('show');
     }
 });
 &lt;/script&gt;</code></pre>
             </div>
             <script>
-                deferimg('fade', 100, 'loaded', function(img) {
+                deferimg('img.fade', 100, 'loaded', function(img) {
                     img.onload = function() {
                         img.classList.add('show');
                     }
@@ -402,15 +402,15 @@ <h2>Lazy-load iframe (Youtube video) with CSS effect</h2>
     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"&gt;&lt;/iframe&gt;
 
 &lt;script type="text/javascript"&gt;
-deferiframe('video', 100, 'loaded', function(frame) {
+deferiframe('iframe.video', 100, 'loaded', function(frame) {
     frame.onload = function() {
         frame.classList.add('show');
     }
 });
 &lt;/script&gt;</code></pre>
         </div>
         <script>
-            deferiframe('video', 100, 'loaded', function(frame) {
+            deferiframe('iframe.video', 100, 'loaded', function(frame) {
                 frame.onload = function() {
                     frame.classList.add('show');
                 }

diff --git a/.src/extensions.js b/.src/extensions.js
@@ -49,7 +49,6 @@
     var classlist_attr  = 'classList';
     var tagname_attr    = 'tagName';
 
-    var class_prefix    = '.';
     var class_regex     = /^\.+/;
     var replace_func    = 'replace';
 
@@ -84,7 +83,7 @@
     }
 
     function defermedia (tagname) {
-        return function (class_name, delay, load_class, callback) {
+        return function (query, delay, load_class, callback) {
             var selector, target, lazy_media_observer, original_callback;
 
             var showmedia = function (media){
@@ -94,10 +93,10 @@
                 }
             }
 
-            class_name  = (class_name || 'lazy')[replace_func](class_regex, '');
+            query       = (query      || tagname + '.lazy');
             load_class  = (load_class || 'deferred')[replace_func](class_regex, '');
             callback    = (callback   || noop);
-            selector    = (tagname + class_prefix + class_name + ':not(' + class_prefix + load_class + ')');
+            selector    = (query + ':not(.' + load_class + ')');
 
             if (observer_class in env) {
                 original_callback   = showmedia;

diff --git a/README.md b/README.md
@@ -213,7 +213,7 @@ deferstyle('https://highlightjs.org/static/demo/styles/tomorrow.css', 'highlight
 ### deferimg
 
 ```js
-deferimg(class_name = 'lazy' [, delay = 0 [, load_class = 'loaded' [, callback = function(image) {} ]]])
+deferimg(query_selector = 'img.lazy' [, delay = 0 [, load_class = 'loaded' [, callback = function(image) {} ]]])
 ```
 The `this` in `callback` is a reference to the target `<img>` DOM element.
 
@@ -223,14 +223,14 @@ Example: Control your lazy images, anywhere, anytime.
     data-src="https://picsum.photos/400/300/?image=314"
     width="400" height="300" alt="Random image" />
 
-<script type="text/javascript">deferimg('basic', 100);</script>
+<script type="text/javascript">deferimg('img.basic', 100);</script>
 ```
 
 
 ### deferiframe
 
 ```js
-deferiframe(class_name = 'lazy' [, delay = 0 [, load_class = 'loaded' [, callback = function(frame) {} ]]])
+deferiframe(query_selector = 'iframe.lazy' [, delay = 0 [, load_class = 'loaded' [, callback = function(frame) {} ]]])
 ```
 The `this` in `callback` is a reference to the target `<iframe>` DOM element.
 
@@ -253,7 +253,7 @@ Example: Lazy-load iframes (Youtube videos) with CSS effect.
     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
 
 <script type="text/javascript">
-deferiframe('video', 100, 'loaded', function(frame) {
+deferiframe('iframe.video', 100, 'loaded', function(frame) {
     frame.onload = function() {
         frame.classList.add('show');
     }

diff --git a/defer_plus.min.js b/defer_plus.min.js