imgix-optimizer 0.0.5 → 0.0.6

data/package.json

@@ -1,9 +1,10 @@
 {
   "name": "imgix-optimizer",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-preset-es2015-rollup": "^3.0.0",
+    "intersection-observer": "^0.5.1",
     "rollup": "^0.60.0",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.0",

data/src/{imgix_bg_image.js → background_image.js}

@@ -1,14 +1,20 @@
-export default class ImgixBgImage {
-
+export default class BackgroundImage {
   constructor(el) {
     // Length of time to complete fade-in transition.
     this.timeToFade = 500;
+    // Data attribute applied before processing.
+    this.processingAttr = 'data-imgix-bg-processed';
     // Device pixel ratio assumes 1 if not set.
     this.dpr = window['devicePixelRatio'] || 1;
+    // The largest image that has been loaded. This assumes the height of the
+    // container will not change.
+    this.largestImageWidth = 0;
     // The primary element (i.e. the one with the background image).
     this.el = $(el);
     // Background image CSS property must be present.
-    if (this.el.css('background-image') == 'none') { return }
+    if (this.el.css('background-image') == 'none') {
+      return;
+    }
     // Prepare the element and its container for optimization.
     this.initEl();
     // Kick off the optimization process.
@@ -24,10 +30,32 @@ export default class ImgixBgImage {
    */
   initOptimization() {
     $('<img>')
-      .on('load', () => this.renderTmpPlaceholderEl())
+      .on('load', $.proxy(this.listenForIntersection, this))
       .attr('src', this.placeholderImgUrl);
   }
 
+  /**
+   * When the element intersects the viewport, begin processing.
+   * (IntersectionObserver and Object.assign() are not supported by IE, but the
+   * polyfills are loaded by Imgix.Optimizer.)
+   */
+  listenForIntersection() {
+    const observer = new IntersectionObserver($.proxy(this.onIntersection, this));
+    observer.observe(this.el[0]);
+  }
+
+  /**
+   * When the element intersects the viewport, check if it is in the viewport
+   * and has not yet been processed. If those conditions are true, begin
+   * rendering the full size image and the transition process.
+   */
+  onIntersection(entries, observer) {
+    let el = $(entries[0].target);
+    if (!entries[0].isIntersecting || $(el).attr(this.processingAttr)) return;
+    $(el).attr(this.processingAttr, true);
+    this.renderTmpPlaceholderEl();
+  }
+
   // ---------------------------------------- | Main Element
 
   /**
@@ -44,11 +72,12 @@ export default class ImgixBgImage {
    * placeholder.
    */
   setPlaceholderImgUrl() {
-    this.placeholderImgUrl = this.el.css('background-image')
+    this.placeholderImgUrl = this.el
+      .css('background-image')
       .replace('url(', '')
       .replace(')', '')
-      .replace(/\"/gi, "")
-      .replace(/\'/gi, "")
+      .replace(/\"/gi, '')
+      .replace(/\'/gi, '')
       .split(', ')[0];
   }
 
@@ -61,7 +90,7 @@ export default class ImgixBgImage {
     this.parentStyles = {
       display: this.el.parent().css('display'),
       position: this.el.parent().css('position')
-    }
+    };
     this.el.parent().css({
       display: 'block',
       position: 'relative'
@@ -167,7 +196,13 @@ export default class ImgixBgImage {
    * of the main element.
    */
   setFullSizeImgUrl() {
-    // Work with the placeholdler image URL, which has been pulled from the
+    // If the full size image URL exists and if the new size is going to be
+    // smaller than the largest size loaded, then we stick with the largest size
+    // that has been used.
+    if (this.fullSizeImgUrl && this.el.outerWidth() * this.dpr <= this.largestImageWidth) return;
+    // Assume that the new width will be the largest size used.
+    this.largestImageWidth = this.el.outerWidth() * this.dpr;
+    // Work with the placeholder image URL, which has been pulled from the
     // background-image css property of the main elements.
     let url = this.placeholderImgUrl.split('?');
     // q is an array of querystring parameters as ["k=v", "k=v", ...].
@@ -175,11 +210,11 @@ export default class ImgixBgImage {
     // Mapping q converts the array to an object of querystring parameters as
     // { k: v, k: v, ... }.
     let args = {};
-    q.map((x) => args[x.split('=')[0]] = x.split('=')[1]);
+    q.map(x => (args[x.split('=')[0]] = x.split('=')[1]));
     // If the image's container is wider than it is tall, we only set width and
     // unset height, and vice versa.
     if (this.el.outerWidth() >= this.el.outerHeight()) {
-      args['w'] = this.el.outerWidth() * this.dpr;
+      args['w'] = this.largestImageWidth;
       delete args['h'];
     } else {
       args['h'] = this.el.outerHeight() * this.dpr;
@@ -188,9 +223,11 @@ export default class ImgixBgImage {
     // Redefine q and go the other direction -- take the args object and convert
     // it back to an array of querystring parameters, as ["k=v", "k=v", ...].
     q = [];
-    for (let k in args) { q.push(`${k}=${args[k]}`) }
+    for (let k in args) {
+      q.push(`${k}=${args[k]}`);
+    }
     // Store the result and return.
-    return this.fullSizeImgUrl = `${url[0]}?${q.join('&')}`;
+    return (this.fullSizeImgUrl = `${url[0]}?${q.join('&')}`);
   }
 
   /**
@@ -255,7 +292,9 @@ export default class ImgixBgImage {
    */
   updateElImg() {
     this.setFullSizeImgUrl();
-    this.el.css('background-image', `url('${this.fullSizeImgUrl}')`);
+    $('<img>')
+      .on('load', event => this.el.css('background-image', `url('${this.fullSizeImgUrl}')`))
+      .attr('src', this.placeholderImgUrl);
   }
 
   /**
@@ -292,7 +331,7 @@ export default class ImgixBgImage {
    */
   initEventListeners() {
     this.initResizeEnd();
-    $(window).on('resizeEnd', (event) => this.updateElImg());
+    $(window).on('resizeEnd', event => this.updateElImg());
   }
 
   /**
@@ -302,7 +341,7 @@ export default class ImgixBgImage {
   initResizeEnd() {
     $(window).resize(function() {
       if (this.resizeTo) {
-        clearTimeout(this.resizeTo)
+        clearTimeout(this.resizeTo);
       }
       this.resizeTo = setTimeout(function() {
         $(this).trigger('resizeEnd');

data/src/{imgix_image.js → image.js}

@@ -1,8 +1,9 @@
-export default class ImgixImage {
-
+export default class Image {
   constructor(img) {
     // Length of crossfade transition.
     this.timeToFade = 500;
+    // Data attribute applied before processing.
+    this.processingAttr = 'data-imgix-img-processed';
     // The main image (pixelated placeholder).
     this.placeholderImg = $(img);
     // Configure the main placeholder image.
@@ -14,14 +15,36 @@ export default class ImgixImage {
   /**
    * Load an image in memory (not within the DOM) with the same source as the
    * placeholder image. Once that has completed, we know we're safe to begin
-   * processing.
+   * listening for the image to intersect the viewport.
    */
   initOptimization() {
     $('<img>')
-      .on('load', $.proxy(this.renderFullSizeImg, this))
+      .on('load', $.proxy(this.listenForIntersection, this))
       .attr('src', this.placeholderImg.attr('src'));
   }
 
+  /**
+   * When the placeholder image intersects the viewport, begin processing.
+   * (IntersectionObserver and Object.assign() are not supported by IE, but the
+   * polyfills are loaded by Imgix.Optimizer.)
+   */
+  listenForIntersection() {
+    const observer = new IntersectionObserver($.proxy(this.onIntersection, this));
+    observer.observe(this.placeholderImg[0]);
+  }
+
+  /**
+   * When the placeholder image intersects the viewport, check if it is in the
+   * viewport and has not yet been processed. If those conditions are true,
+   * begin rendering the full size image and the transition process.
+   */
+  onIntersection(entries, observer) {
+    let img = $(entries[0].target);
+    if (!entries[0].isIntersecting || $(img).attr(this.processingAttr)) return;
+    img.attr(this.processingAttr, true);
+    this.renderFullSizeImg();
+  }
+
   // ---------------------------------------- | Placeholder Image
 
   /**
@@ -29,6 +52,7 @@ export default class ImgixImage {
    */
   initPlaceholder() {
     this.setPlaceholderCss();
+    this.setPlaceholderParentTmpCss();
   }
 
   /**
@@ -42,6 +66,21 @@ export default class ImgixImage {
     }
   }
 
+  /**
+   * The parent of the image container should be relatively positioned
+   * (temporarily) so temp image can be absolutely positioned.
+   */
+  setPlaceholderParentTmpCss() {
+    this.parentStyles = {
+      display: this.placeholderImg.parent().css('display'),
+      position: this.placeholderImg.parent().css('position')
+    };
+    this.placeholderImg.parent().css({
+      display: 'block',
+      position: 'relative'
+    });
+  }
+
   // ---------------------------------------- | Full-Size Image
 
   /**
@@ -72,11 +111,23 @@ export default class ImgixImage {
       position: 'absolute',
       top: this.placeholderImg.position().top,
       left: this.placeholderImg.position().left,
-      width: this.placeholderImg.width(),
-      height: this.placeholderImg.height()
+      width: '100%',
+      height: '100%'
     });
   }
 
+  /**
+   * Return the width and height of the placeholder image, including decimals.
+   * Uses precise measurements like this helps ensure the element doesn't slide
+   * when transitioning to the full size image.
+   */
+  getPlaceholderImgRect() {
+    return {
+      width: this.placeholderImg[0].getBoundingClientRect().width,
+      height: this.placeholderImg[0].getBoundingClientRect().height
+    };
+  }
+
   /**
    * Prep the full-size image with the attributes necessary to become its full
    * size. Right now it is still just a replica of the placeholder, sitting
@@ -87,9 +138,15 @@ export default class ImgixImage {
    * upon.
    */
   setFullSizeImgSrc() {
-    var newSrc = this.placeholderImg.attr('src')
-      .replace(/(\?|\&)(w=)(\d+)/i, '$1$2' + this.placeholderImg.width())
-      .replace(/(\?|\&)(h=)(\d+)/i, '$1$2' + this.placeholderImg.height());
+    let newSrc = this.placeholderImg
+      .attr('src')
+      .replace(/(\?|\&)(w=)(\d+)/i, '$1$2' + this.getPlaceholderImgRect().width)
+      .replace(/(\?|\&)(h=)(\d+)/i, '$1$2' + this.getPlaceholderImgRect().height);
+    // Add a height attribute if it is missing. This is the key to the image not
+    // jumping around after transitioning to the full-size image.
+    if (newSrc.search(/(\?|\&)(h=)(\d+)/i) < 0) {
+      newSrc = `${newSrc}&h=${this.getPlaceholderImgRect().height}&fit=crop`;
+    }
     this.fullSizeImg.attr('ix-src', newSrc);
     // TODO: Make this a configurable option or document it as a more semantic temporary class
     this.fullSizeImg.addClass('img-responsive imgix-optimizing');
@@ -133,6 +190,7 @@ export default class ImgixImage {
     this.fadeOutPlaceholder();
     setTimeout(() => {
       this.removeFullSizeImgProperties();
+      this.replacePlaceholderParentTmpCss();
       this.removeImg();
     }, this.timeToFade);
   }
@@ -154,11 +212,23 @@ export default class ImgixImage {
     this.fullSizeImg.removeClass('imgix-optimizing');
   }
 
+  /**
+   * Reset the container's adjusted CSS properties.
+   */
+  replacePlaceholderParentTmpCss() {
+    this.placeholderImg.parent().css({
+      display: this.parentStyles.display,
+      position: this.parentStyles.position
+    });
+  }
+
   /**
    * Remove the placeholder image from the DOM since we no longer need it.
    */
   removeImg() {
-    if(!this.placeholderImg) { return }
+    if (!this.placeholderImg) {
+      return;
+    }
     this.placeholderImg.remove();
     this.placeholderImg = undefined;
   }

data/src/main.js

@@ -1,9 +1,5 @@
-import ImgixBgImage from './imgix_bg_image';
-import ImgixImage from './imgix_image';
 import Optimizer from './optimizer';
 
 window['Imgix'] = window['Imgix'] || {};
 
-Imgix.ImgixBgImage = ImgixBgImage;
-Imgix.ImgixImage = ImgixImage;
 Imgix.Optimizer = Optimizer;

data/src/optimizer.js

@@ -1,21 +1,30 @@
-import ImgixImage from './imgix_image';
-import ImgixBgImage from './imgix_bg_image';
+import Image from './image';
+import BackgroundImage from './background_image';
+import * as IntObs from 'intersection-observer';
+import * as ObjectAssign from './polyfills/object_assign';
 
 export default class Optimizer {
-
   constructor(options = {}) {
+    this.initDependencies();
     this.initOptions(options);
     this.optimizeImages();
     this.optimizeBgImages();
   }
 
+  // ---------------------------------------- | Dependencies
+
+  initDependencies() {
+    IntObs;
+    ObjectAssign;
+  }
+
   // ---------------------------------------- | Options
 
   initOptions(options = {}) {
     this.options = options;
     const defaultOptions = {
       parent: 'body'
-    }
+    };
     for (let key in defaultOptions) {
       if (defaultOptions.hasOwnProperty(key) && !this.options[key]) {
         this.options[key] = defaultOptions[key];
@@ -27,7 +36,7 @@ export default class Optimizer {
 
   optimizeImages() {
     $(`${this.options.parent} img[data-optimize-img]`).each((idx, img) => {
-      new ImgixImage(img);
+      new Image(img);
     });
   }
 
@@ -35,9 +44,8 @@ export default class Optimizer {
 
   optimizeBgImages() {
     $(`${this.options.parent} [data-optimize-bg-img]`).each((idx, img) => {
-      new ImgixBgImage(img);
+      new BackgroundImage(img);
     });
     return true;
   }
-
 }

data/src/polyfills/object_assign.js

@@ -0,0 +1,32 @@
+if (typeof Object.assign != 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, 'assign', {
+    value: function assign(target, varArgs) {
+      // .length of function is 2
+      'use strict';
+      if (target == null) {
+        // TypeError if undefined or null
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource != null) {
+          // Skip over if undefined or null
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: imgix-optimizer
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - Sean C Davis
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-08-29 00:00:00.000000000 Z
+date: 2019-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -37,7 +37,8 @@ files:
 - LICENSE
 - README.md
 - Rakefile
-- dist/imgix-optimizer-0.0.5.min.js
+- dist/crds.html
+- dist/imgix-optimizer-0.0.6.min.js
 - dist/imgix-optimizer.js
 - dist/index.html
 - dist/main.css
@@ -50,13 +51,13 @@ files:
 - package.json
 - rollup.config.dev.js
 - rollup.config.js
-- src/imgix_bg_image.js
-- src/imgix_image.js
+- src/background_image.js
+- src/image.js
 - src/main.js
 - src/optimizer.js
+- src/polyfills/object_assign.js
 - test/test.js
 - vendor/assets/javascripts/.keep
-- vendor/assets/javascripts/imgix-optimizer.js
 homepage: https://www.ample.co/
 licenses:
 - MIT