ab-interchange - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

AB-interchange.js

 !(function(name, definition) {
-  if (typeof module != 'undefined') {
+  if (typeof module !== 'undefined') {
     module.exports = definition();
-  } else if (typeof define == 'function' && typeof define.amd == 'object') {
+  } else if (typeof define === 'function' && typeof define.amd === 'object') {
     define(definition);
@@ -11,3 +11,3 @@ } else {
 
-  "use strict";
+  'use strict';
 
@@ -26,5 +26,8 @@ function extend(){
 
-    this.settings = extend({}, Interchange.defaults, opt);
-    this.$element = $(element);
-    this.rules    = [];
+    this.settings     = extend({}, Interchange.defaults, opt);
+    this.element      = element;
+    this.$element     = $(element);
+    this.rules        = [];
+    this.currentPath  = '';
+    this.defaultPath  = '';
 
@@ -36,3 +39,4 @@ this.init()
   Interchange.defaults = {
-    rules: null
+    lazy    : false,
+    delay   : 100
   };
@@ -43,3 +47,3 @@
       this._generateRules()
-          ._reflow();
+          ._updatePath();
 
@@ -55,4 +59,3 @@ return this;
         rules = this.settings.rules;
-      }
-      else {
+      } else {
         rules = this.$element.data('ab-interchange').match(/\[[^\]]+\]/g);
@@ -62,5 +65,5 @@ }
       for (var i = 0, len = rules.length; i < len; i++) {
-        var rule = rules[i].slice(1, -1).split(', '),
-            path = rule.slice(0, -1).join(''),
-            query = rule[rule.length - 1];
+        var rule    = rules[i].slice(1, -1).split(', '),
+            path    = rule.slice(0, -1).join(''),
+            query   = rule[rule.length - 1];
 
@@ -78,13 +81,19 @@ rulesList.push({
 
-    _reflow: function() {
-      var match,
-          path,
-          currentQuery = AB.mediaQuery.current;
+    _updatePath: function() {
+      var match         = false,
+          path          = '',
+          rules         = this.rules,
+          currentQuery  = AB.mediaQuery.current;
 
       // Iterate through each rule
-      for (var i = 0, len = this.rules.length; i < len; i++) {
-        var rule = this.rules[i];
+      for (var i = 0, len = rules.length; i < len; i++) {
+        var rule  = rules[i];
 
-        if ( window.matchMedia(AB.mediaQuery.get(rule.query)).matches ) {
-          path = rule.path;
+        // check if default value is provided
+        if (rule.query === 'default' && this.defaultPath === '') {
+          this.defaultPath = rule.path;
+        }
+
+        if (window.matchMedia(AB.mediaQuery.get(rule.query)).matches) {
+          path  = rule.path;
           match = true;
@@ -94,7 +103,13 @@ }
 
-      if (match) {
-        this._replace(path);
-      } else {
-        this._replace("");
-        this.currentPath = path;
+      // set new current path
+      this.currentPath = (path === '') ? this.defaultPath : path;
+
+      this._replace();
+      return this;
+
+    },
+
+    _onScroll: function() {
+      if (this._inView()) {
+        this._replace();
       }
@@ -104,36 +119,50 @@ },
     _events: function() {
-      var that = this;
+      var that = this,
+          scrollTimer;
 
       window.addEventListener('changed.ab-mediaquery', function(){
-        that._reflow();
+        // updata path then replace
+        that._updatePath();
       });
+
+      if (this.settings.lazy) {
+        window.addEventListener('scroll', function() {
+          clearTimeout(scrollTimer);
+          scrollTimer = setTimeout(function() {
+            that._onScroll.call(that);
+          }, that.settings.delay);
+        });
+      }
     },
 
-    _replace: function(path) {
-      if (this.currentPath === path) return;
+    _inView: function() {
+      return this.element.getBoundingClientRect().top + $(window).scrollTop() <= $(window).scrollTop() + window.innerHeight;
+    },
 
-      // update current path
-      this.currentPath = path;
-
+    _replace: function() {
       var that = this,
+          path = that.currentPath,
           trigger = 'replaced.ab-interchange';
 
-      // Replacing images
-      if (this.$element[0].nodeName === 'IMG') {
-        this.$element.attr('src', path).load().trigger(trigger);
-      }
-      // Replacing background images
-      else if (path.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i)) {
-        this.$element.css({ 'background-image': 'url('+path+')' }).trigger(trigger);
-      }
-      // Replacing HTML
-      else {
-        if (path === "") {
-          that.$element.empty();
-        } else {
-          $.get(path, function(response) {
-            that.$element.html(response).trigger(trigger);
-          });
+      if ( !this.settings.lazy || (this.settings.lazy && this._inView()) ) {
+        // Replacing images
+        if (this.$element[0].nodeName === 'IMG') {
+          this.$element.attr('src', path).load().trigger(trigger);
         }
+        // Replacing background images
+        else if (path.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i)) {
+          this.$element.css({ 'background-image': 'url('+path+')' }).trigger(trigger);
+        }
+        // Replacing HTML
+        else {
+          if (path === "") {
+            that.$element.empty();
+          } else {
+            $.get(path, function(response) {
+              that.$element.html(response).trigger(trigger);
+            });
+          }
+        }
       }
+
     }
@@ -140,0 +169,0 @@ };

package.json

 {
   "name": "ab-interchange",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "AB-interchange: While responsive image loading is not really an easy task even today, here is a solution to manage conditional (based on breakpoints) loading of img, background-image or even HTML content.",
@@ -26,4 +26,4 @@ "main": "ab-interchange.js",
   "dependencies": {
-    "ab-mediaquery": "1.2.0"
+    "ab-mediaquery": "1.3.1"
   }
 }

README.md

 # AB-interchange
 
-While responsive image loading is not really an easy task even today, here is a solution to manage conditional (based on breakpoints) loading of img, background-image or even HTML content.
+Responsive image loading is not really an easy task even today, here is a solution to manage conditional (based on breakpoints) loading of img, background-image or even HTML content. That also provide for lazy-loading (optional).
 
-Heavily inspired by https://github.com/zurb/foundation-sites.
+Inspired by https://github.com/zurb/foundation-sites.
 
@@ -29,5 +29,11 @@ Demo: [Codepen](http://codepen.io/lordfpx/pen/yJbwrK)
 
-The you only need to initialize with `abInterchange()`.
+Then you only need to initialize with `abInterchange()` or with options:
+```
+abInterchange({
+  lazy: false,  // or true
+  delay: 100    // debounce time on scroll event (only when lazy loading is true)
+});
+```
 
-data-ab-interchange attribute should contain a list of arrays with your needed breakpoints as defined in AB-mediaQuery. Defaults values are :
+**data-ab-interchange** attribute should contain a list of arrays with your needed breakpoints as defined in AB-mediaQuery AND a default image that will be loaded when matching is false. Defaults values are :
 * small
@@ -38,7 +44,9 @@ * medium
 
+It's clever to prepare a spinner animation as first img src or default styling before init. You can use **'replaced.ab-interchange'** event to remove that right after.
 
+
 ## img
 
   ```
-  <img src="" data-ab-interchange="[img/cat-1x.jpg, small], [img/cat-2x.jpg, medium], [img/cat-3x.jpg, large]">
+  <img src="spinner.gif" data-ab-interchange="[img/cat-1x.jpg, default], [img/cat-1x.jpg, small], [img/cat-2x.jpg, medium], [img/cat-3x.jpg, large]">
   ```
@@ -50,3 +58,3 @@
   ```
-  <div data-ab-interchange="[img/cat-1x.jpg, small], [img/cat-2x.jpg, medium], [img/cat-3x.jpg, large]"></div>
+  <div data-ab-interchange="[img/cat-1x.jpg, default], [img/cat-1x.jpg, small], [img/cat-2x.jpg, medium], [img/cat-3x.jpg, large]"></div>
   ```
@@ -59,3 +67,3 @@
 ```
-<div data-ab-interchange="[small-content.html, small], [medium-content.html, medium], [large-content.html, large]"></div>
+<div data-ab-interchange="[small-content.html, default], [small-content.html, small], [medium-content.html, medium], [large-content.html, large]"></div>
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9228

increased by19.72%

Lines of code

140

increased by20.69%

Number of lines in readme file

66

increased by13.79%

Dependency changes

• + Addedab-mediaquery@1.3.1(transitive)

• - Removedab-mediaquery@1.2.0(transitive)

• Updatedab-mediaquery@1.3.1