imgix-optimizer 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bd1ae366b8d82f6d1af965324e7af14f3e18e6213f7da8f76167b717c3208165
-  data.tar.gz: d0a935066a1562aa2bfbc5991c877a0fb9d638b96829792d350b7dfb7159b315
+  metadata.gz: dd027b0cd5fc6f3a425b4bfa91e625eac7fe3c497e3a3417e8db7e6b00444d7c
+  data.tar.gz: 16537284f204d87c8faf335da2aa1e174272de334079d886118dafb57a5b39c7
 SHA512:
-  metadata.gz: fc02952266c77a940cf8a74f8bf26aa5d281461023ef8d9cd0f856bdd3ef272b81aeb1f035d0a051bcd9773428704632d64e35d7c42452ff547f3bd81d346729
-  data.tar.gz: c430f91bf81f1c2315999bf6affe1c74d46c731aa8f1035bc56a5214e2849f1dfeb553a7c5c869b5be8625c297fdc931d4eb3c9344a98980aa59cd09e54b96a0
+  metadata.gz: c21e4346e3a5b1ba13e7169e2df5bcc0d0b3dd510b57784ac91612ab4d4c79f3b0244b11ee36cac95425677ed90a62ab22d766acbdf81191febab9141921757b
+  data.tar.gz: 0d4df2a978eb83d55b6076e304f7f5cd61e532e95e8b85c424c6b491e72aa6702e12a4e66fa5ea6f41e32590acc5c6beb6b6bc878daad09b200230a0b98d40ed

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    imgix-optimizer (0.0.2)
+    imgix-optimizer (0.0.3)
 
 GEM
   remote: https://rubygems.org/

data/dist/{imgix-optimizer-0.0.2.min.js → imgix-optimizer-0.0.3.min.js}

@@ -1 +1 @@
-!function(){"use strict";var t=function(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")},e=function(){function l(e,i){for(var t=0;t<i.length;t++){var l=i[t];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return function(e,i,t){return i&&l(e.prototype,i),t&&l(e,t),e}}(),l=function(){function i(e){t(this,i),this.timeToFade=500,this.dpr=window.devicePixelRatio||1,this.el=$(e),"none"!=this.el.css("background-image")&&(this.initEl(),this.initOptimization(),this.initEventListeners())}return e(i,[{key:"initOptimization",value:function(){var e=this;$("<img>").on("load",function(){return e.renderTmpPlaceholderEl()}).attr("src",this.placeholderImgUrl)}},{key:"initEl",value:function(){this.setPlaceholderImgUrl(),this.setContainerTmpCss(),this.setElTmpCss()}},{key:"setPlaceholderImgUrl",value:function(){this.placeholderImgUrl=this.el.css("background-image").replace("url(","").replace(")","").replace(/\"/gi,"").replace(/\'/gi,"").split(", ")[0]}},{key:"setContainerTmpCss",value:function(){this.el.parent().css("position","relative")}},{key:"setElTmpCss",value:function(){"absolute"!=this.el.css("position")&&this.el.css("position","relative")}},{key:"renderTmpPlaceholderEl",value:function(){this.initTmpPlaceholderEl(),this.setTmpPlaceholderElCss(),this.addTmpPlaceholderElToDom(),this.renderFullSizeImg()}},{key:"initTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl=this.el.clone(),this.tmpPlaceholderEl.html("")}},{key:"setTmpPlaceholderElCss",value:function(){this.tmpPlaceholderEl.css({position:"absolute",top:this.el.position().top,left:this.el.position().left,width:this.el.outerWidth(),height:this.el.outerHeight(),backgroundColor:"transparent"})}},{key:"addTmpPlaceholderElToDom",value:function(){this.tmpPlaceholderEl.insertBefore(this.el)}},{key:"renderFullSizeImg",value:function(){this.removeElBgImg(),this.initTmpFullSizeEl(),this.setTmpFullSizeElImg(),this.addTmpFullSizeElToDom(),this.initTransition()}},{key:"removeElBgImg",value:function(){this.elBgColor=this.el.css("background-color"),this.el.css("background-color","transparent"),this.el.css("background-image","")}},{key:"initTmpFullSizeEl",value:function(){this.tmpFullSizeEl=this.tmpPlaceholderEl.clone()}},{key:"setFullSizeImgUrl",value:function(){var e=this.placeholderImgUrl.split("?"),i=e[e.length-1].split("&"),t={};for(var l in i.map(function(e){return t[e.split("=")[0]]=e.split("=")[1]}),this.el.outerWidth()>=this.el.outerHeight()?(t.w=this.el.outerWidth()*this.dpr,delete t.h):(t.h=this.el.outerHeight()*this.dpr,delete t.w),i=[],t)i.push(l+"="+t[l]);return this.fullSizeImgUrl=e[0]+"?"+i.join("&")}},{key:"setTmpFullSizeElImg",value:function(){this.setFullSizeImgUrl(),this.tmpFullSizeEl.css("background-image",'url("'+this.fullSizeImgUrl+'")')}},{key:"addTmpFullSizeElToDom",value:function(){this.tmpFullSizeEl.insertBefore(this.tmpPlaceholderEl)}},{key:"initTransition",value:function(){$("<img>").on("load",$.proxy(this.transitionImg,this)).attr("src",this.fullSizeImgUrl)}},{key:"transitionImg",value:function(){var e=this;this.fadeOutTmpPlaceholderEl(),setTimeout(function(){e.updateElImg(),e.replaceElTmpCss(),e.removeTmpEls()},this.timeToFade)}},{key:"fadeOutTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl.fadeTo(this.timeToFade,0)}},{key:"updateElImg",value:function(){this.setFullSizeImgUrl(),this.el.css("background-image","url('"+this.fullSizeImgUrl+"')")}},{key:"replaceElTmpCss",value:function(){this.el.css("background-color",this.elBgColor)}},{key:"removeTmpEls",value:function(){this.tmpPlaceholderEl.remove(),this.tmpFullSizeEl.remove(),this.tmpPlaceholderEl=void 0,this.tmpFullSizeEl=void 0}},{key:"initEventListeners",value:function(){var i=this;this.initResizeEnd(),$(window).on("resizeEnd",function(e){return i.updateElImg()})}},{key:"initResizeEnd",value:function(){$(window).resize(function(){this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){$(this).trigger("resizeEnd")},500)})}}]),i}(),o=function(){function i(e){t(this,i),this.timeToFade=500,this.placeholderImg=$(e),this.initOptimization()}return e(i,[{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.renderFullSizeImg,this)).attr("src",this.placeholderImg.attr("src"))}},{key:"renderFullSizeImg",value:function(){this.initFullSizeImg(),this.setFullSizeImgTempCss(),this.setFullSizeImgSrc(),this.addFullSizeImgToDom(),this.initTransition()}},{key:"initFullSizeImg",value:function(){this.fullSizeImg=this.placeholderImg.clone()}},{key:"setFullSizeImgTempCss",value:function(){this.fullSizeImg.css({position:"absolute",top:this.placeholderImg.position().top,left:this.placeholderImg.position().left,width:this.placeholderImg.width(),height:this.placeholderImg.height()})}},{key:"setFullSizeImgSrc",value:function(){var e=this.placeholderImg.attr("src").replace(/(\?|\&)(w=)(\d+)/i,"$1$2"+this.placeholderImg.width()).replace(/(\?|\&)(h=)(\d+)/i,"$1$2"+this.placeholderImg.height());this.fullSizeImg.attr("ix-src",e),this.fullSizeImg.addClass("img-responsive tmp-img-placeholder"),this.fullSizeImg.removeAttr("data-optimize-img")}},{key:"addFullSizeImgToDom",value:function(){this.fullSizeImg.insertBefore(this.placeholderImg)}},{key:"initTransition",value:function(){var e=this;this.fullSizeImg.on("load",function(){return e.transitionImg()}),imgix.init()}},{key:"transitionImg",value:function(){var e=this;if(!this.placeholderImg)return!0;this.fadeOutPlaceholder(),setTimeout(function(){e.removeFullSizeImgProperties(),e.removeImg()},this.timeToFade)}},{key:"fadeOutPlaceholder",value:function(){this.placeholderImg.fadeTo(this.timeToFade,0)}},{key:"removeFullSizeImgProperties",value:function(){this.fullSizeImg.removeAttr("style"),this.fullSizeImg.removeClass("tmp-img-placeholder")}},{key:"removeImg",value:function(){this.placeholderImg&&(this.placeholderImg.remove(),this.placeholderImg=void 0)}}]),i}(),i=function(){function i(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t(this,i),this.initOptions(e),this.optimizeImages(),this.optimizeBgImages()}return e(i,[{key:"initOptions",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.options=e;var i={parent:"body"};for(var t in i)i.hasOwnProperty(t)&&!this.options[t]&&(this.options[t]=i[t])}},{key:"optimizeImages",value:function(){$(this.options.parent+" img[data-optimize-img]").each(function(e,i){new o(i)})}},{key:"optimizeBgImages",value:function(){return $(this.options.parent+" [data-optimize-bg-img]").each(function(e,i){new l(i)}),!0}}]),i}();window.Imgix=window.Imgix||{},Imgix.ImgixBgImage=l,Imgix.ImgixImage=o,Imgix.Optimizer=i}();
+!function(){"use strict";var t=function(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")},e=function(){function l(e,i){for(var t=0;t<i.length;t++){var l=i[t];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return function(e,i,t){return i&&l(e.prototype,i),t&&l(e,t),e}}(),l=function(){function i(e){t(this,i),this.timeToFade=500,this.dpr=window.devicePixelRatio||1,this.el=$(e),"none"!=this.el.css("background-image")&&(this.initEl(),this.initOptimization(),this.initEventListeners())}return e(i,[{key:"initOptimization",value:function(){var e=this;$("<img>").on("load",function(){return e.renderTmpPlaceholderEl()}).attr("src",this.placeholderImgUrl)}},{key:"initEl",value:function(){this.setPlaceholderImgUrl(),this.setContainerTmpCss(),this.setElTmpCss()}},{key:"setPlaceholderImgUrl",value:function(){this.placeholderImgUrl=this.el.css("background-image").replace("url(","").replace(")","").replace(/\"/gi,"").replace(/\'/gi,"").split(", ")[0]}},{key:"setContainerTmpCss",value:function(){this.el.parent().css("position","relative")}},{key:"setElTmpCss",value:function(){"absolute"!=this.el.css("position")&&this.el.css("position","relative")}},{key:"renderTmpPlaceholderEl",value:function(){this.initTmpPlaceholderEl(),this.setTmpPlaceholderElCss(),this.addTmpPlaceholderElToDom(),this.renderFullSizeImg()}},{key:"initTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl=this.el.clone(),this.tmpPlaceholderEl.html("")}},{key:"setTmpPlaceholderElCss",value:function(){this.tmpPlaceholderEl.css({position:"absolute",top:this.el.position().top,left:this.el.position().left,width:this.el.outerWidth(),height:this.el.outerHeight(),backgroundColor:"transparent"})}},{key:"addTmpPlaceholderElToDom",value:function(){this.tmpPlaceholderEl.insertBefore(this.el)}},{key:"renderFullSizeImg",value:function(){this.removeElBgImg(),this.initTmpFullSizeEl(),this.setTmpFullSizeElImg(),this.addTmpFullSizeElToDom(),this.initTransition()}},{key:"removeElBgImg",value:function(){this.elBgColor=this.el.css("background-color"),this.el.css("background-color","transparent"),this.el.css("background-image","")}},{key:"initTmpFullSizeEl",value:function(){this.tmpFullSizeEl=this.tmpPlaceholderEl.clone()}},{key:"setFullSizeImgUrl",value:function(){var e=this.placeholderImgUrl.split("?"),i=e[e.length-1].split("&"),t={};for(var l in i.map(function(e){return t[e.split("=")[0]]=e.split("=")[1]}),this.el.outerWidth()>=this.el.outerHeight()?(t.w=this.el.outerWidth()*this.dpr,delete t.h):(t.h=this.el.outerHeight()*this.dpr,delete t.w),i=[],t)i.push(l+"="+t[l]);return this.fullSizeImgUrl=e[0]+"?"+i.join("&")}},{key:"setTmpFullSizeElImg",value:function(){this.setFullSizeImgUrl(),this.tmpFullSizeEl.css("background-image",'url("'+this.fullSizeImgUrl+'")')}},{key:"addTmpFullSizeElToDom",value:function(){this.tmpFullSizeEl.insertBefore(this.tmpPlaceholderEl)}},{key:"initTransition",value:function(){$("<img>").on("load",$.proxy(this.transitionImg,this)).attr("src",this.fullSizeImgUrl)}},{key:"transitionImg",value:function(){var e=this;this.fadeOutTmpPlaceholderEl(),setTimeout(function(){e.updateElImg(),e.replaceElTmpCss(),e.removeTmpEls()},this.timeToFade)}},{key:"fadeOutTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl.fadeTo(this.timeToFade,0)}},{key:"updateElImg",value:function(){this.setFullSizeImgUrl(),this.el.css("background-image","url('"+this.fullSizeImgUrl+"')")}},{key:"replaceElTmpCss",value:function(){this.el.css("background-color",this.elBgColor)}},{key:"removeTmpEls",value:function(){this.tmpPlaceholderEl.remove(),this.tmpFullSizeEl.remove(),this.tmpPlaceholderEl=void 0,this.tmpFullSizeEl=void 0}},{key:"initEventListeners",value:function(){var i=this;this.initResizeEnd(),$(window).on("resizeEnd",function(e){return i.updateElImg()})}},{key:"initResizeEnd",value:function(){$(window).resize(function(){this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){$(this).trigger("resizeEnd")},500)})}}]),i}(),s=function(){function i(e){t(this,i),this.timeToFade=500,this.placeholderImg=$(e),this.initPlaceholder(),this.initOptimization()}return e(i,[{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.renderFullSizeImg,this)).attr("src",this.placeholderImg.attr("src"))}},{key:"initPlaceholder",value:function(){this.setPlaceholderCss()}},{key:"setPlaceholderCss",value:function(){"absolute"!=this.placeholderImg.css("position")&&this.placeholderImg.css("position","relative")}},{key:"renderFullSizeImg",value:function(){this.initFullSizeImg(),this.setFullSizeImgTempCss(),this.setFullSizeImgSrc(),this.addFullSizeImgToDom(),this.initTransition()}},{key:"initFullSizeImg",value:function(){this.fullSizeImg=this.placeholderImg.clone()}},{key:"setFullSizeImgTempCss",value:function(){this.fullSizeImg.css({position:"absolute",top:this.placeholderImg.position().top,left:this.placeholderImg.position().left,width:this.placeholderImg.width(),height:this.placeholderImg.height()})}},{key:"setFullSizeImgSrc",value:function(){var e=this.placeholderImg.attr("src").replace(/(\?|\&)(w=)(\d+)/i,"$1$2"+this.placeholderImg.width()).replace(/(\?|\&)(h=)(\d+)/i,"$1$2"+this.placeholderImg.height());this.fullSizeImg.attr("ix-src",e),this.fullSizeImg.addClass("img-responsive tmp-img-placeholder"),this.fullSizeImg.removeAttr("data-optimize-img")}},{key:"addFullSizeImgToDom",value:function(){this.fullSizeImg.insertBefore(this.placeholderImg)}},{key:"initTransition",value:function(){var e=this;this.fullSizeImg.on("load",function(){return e.transitionImg()}),imgix.init()}},{key:"transitionImg",value:function(){var e=this;if(!this.placeholderImg)return!0;this.fadeOutPlaceholder(),setTimeout(function(){e.removeFullSizeImgProperties(),e.removeImg()},this.timeToFade)}},{key:"fadeOutPlaceholder",value:function(){this.placeholderImg.fadeTo(this.timeToFade,0)}},{key:"removeFullSizeImgProperties",value:function(){this.fullSizeImg.removeAttr("style"),this.fullSizeImg.removeClass("tmp-img-placeholder")}},{key:"removeImg",value:function(){this.placeholderImg&&(this.placeholderImg.remove(),this.placeholderImg=void 0)}}]),i}(),i=function(){function i(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};t(this,i),this.initOptions(e),this.optimizeImages(),this.optimizeBgImages()}return e(i,[{key:"initOptions",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.options=e;var i={parent:"body"};for(var t in i)i.hasOwnProperty(t)&&!this.options[t]&&(this.options[t]=i[t])}},{key:"optimizeImages",value:function(){$(this.options.parent+" img[data-optimize-img]").each(function(e,i){new s(i)})}},{key:"optimizeBgImages",value:function(){return $(this.options.parent+" [data-optimize-bg-img]").each(function(e,i){new l(i)}),!0}}]),i}();window.Imgix=window.Imgix||{},Imgix.ImgixBgImage=l,Imgix.ImgixImage=s,Imgix.Optimizer=i}();

data/dist/imgix-optimizer.js

@@ -405,8 +405,10 @@
 
       // Length of crossfade transition.
       this.timeToFade = 500;
-      // Main (pixellated placeholder) image.
+      // The main image (pixelated placeholder).
       this.placeholderImg = $(img);
+      // Configure the main placeholder image.
+      this.initPlaceholder();
       // Kick off the optimization process.
       this.initOptimization();
     }
@@ -424,6 +426,32 @@
         $('<img>').on('load', $.proxy(this.renderFullSizeImg, this)).attr('src', this.placeholderImg.attr('src'));
       }
 
+      // ---------------------------------------- | Placeholder Image
+
+      /**
+       * Make necessary CSS adjustments to main placeholder image.
+       */
+
+    }, {
+      key: 'initPlaceholder',
+      value: function initPlaceholder() {
+        this.setPlaceholderCss();
+      }
+
+      /**
+       * The main image must have a position set for it to remain in front of the
+       * full-size image. We assume that if the element is not explicitly positioned
+       * absolutely, then it can safely be positioned relatively.
+       */
+
+    }, {
+      key: 'setPlaceholderCss',
+      value: function setPlaceholderCss() {
+        if (this.placeholderImg.css('position') != 'absolute') {
+          this.placeholderImg.css('position', 'relative');
+        }
+      }
+
       // ---------------------------------------- | Full-Size Image
 
       /**

data/dist/index.html

@@ -12,7 +12,7 @@
 
   <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
   <script src="https://rawgit.com/imgix/imgix.js/master/dist/imgix.min.js"></script>
-  <script src="imgix-optimizer-0.0.1.min.js"></script>
+  <script src="imgix-optimizer.js"></script>
 </head>
 
 <body>
@@ -54,6 +54,37 @@
     </div>
   </div>
 
+  <div class="container">
+    <h4 class="font-family-condensed-extra font-size-h3 text-uppercase">2018 Series</h4>
+    <!-- Past series: Current year -->
+    <div class="row">
+      <div class="col-xs-12 col-md-4">
+        <a href="/series/spark-2018" title="Spark 2018">
+          <img class="push-bottom img-full-width"   src="//crds-media-int.imgix.net/5oKn4CG5u8qS8YMEugiGyo/4c962a693490aab72f0429189d21873e/crossroads-spark-2018.jpg?auto=format,compress&w=16&h=9&fit=crop" alt="Spark 2018" data-optimize-img>
+        </a>
+      </div>
+
+      <div class="col-xs-12 col-md-4">
+        <a href="/series/spirit-realm" title="Spirit Realm">
+          <img class="push-bottom img-full-width" src="//crds-media-int.imgix.net/4M9c40S5e8sAYo0GEao6em/235b9b1bb29e2e9d236cb9b07b462ac7/crossroads-spirit-realm.jpg?auto=format,compress&w=16&h=9&fit=crop" alt="Spirit Realm" data-optimize-img>
+        </a>
+      </div>
+
+      <div class="col-xs-12 col-md-4">
+        <a href="/series/where-in-the-world-is-carmen-sandiego" title="Where in the World Is Carmen Sandiego">
+          <img class="push-bottom img-full-width" src="//crds-media-int.imgix.net/3NR06Cto88oCW6ssWwCkoy/eae1889e620f5c4b4627b8b6fc100e49/carmen.jpg?auto=format,compress&w=16&h=9&fit=crop" alt="Where in the World Is Carmen Sandiego" data-optimize-img>
+        </a>
+      </div>
+
+      <div class="col-xs-12 col-md-4">
+        <a href="/series/ipsum-cursus-ornare" title="Ipsum Cursus Ornare">
+          <img class="push-bottom img-full-width" src="//crds-media-int.imgix.net/6tOogMSdyweiYsUIUCIIi6/513d1df4271df6265996244102189efc/joshua-ness-322881-unsplash.jpg?auto=format,compress&w=16&h=9&fit=crop" alt="Ipsum Cursus Ornare" data-optimize-img>
+        </a>
+      </div>
+    </div>
+  </div>
+
+
   <script>
     (function() {
       new Imgix.Optimizer();

data/dist/main.css

@@ -1,5 +1,5 @@
 img {
-  position: relative;
+  /* position: relative; */
   width: 100%;
 }
 

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imgix-optimizer",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-preset-es2015-rollup": "^3.0.0",

data/src/imgix_image.js

@@ -3,8 +3,10 @@ export default class ImgixImage {
   constructor(img) {
     // Length of crossfade transition.
     this.timeToFade = 500;
-    // Main (pixellated placeholder) image.
+    // The main image (pixelated placeholder).
     this.placeholderImg = $(img);
+    // Configure the main placeholder image.
+    this.initPlaceholder();
     // Kick off the optimization process.
     this.initOptimization();
   }
@@ -20,6 +22,26 @@ export default class ImgixImage {
       .attr('src', this.placeholderImg.attr('src'));
   }
 
+  // ---------------------------------------- | Placeholder Image
+
+  /**
+   * Make necessary CSS adjustments to main placeholder image.
+   */
+  initPlaceholder() {
+    this.setPlaceholderCss();
+  }
+
+  /**
+   * The main image must have a position set for it to remain in front of the
+   * full-size image. We assume that if the element is not explicitly positioned
+   * absolutely, then it can safely be positioned relatively.
+   */
+  setPlaceholderCss() {
+    if (this.placeholderImg.css('position') != 'absolute') {
+      this.placeholderImg.css('position', 'relative');
+    }
+  }
+
   // ---------------------------------------- | Full-Size Image
 
   /**

data/vendor/assets/javascripts/imgix-optimizer.js

@@ -405,8 +405,10 @@
 
       // Length of crossfade transition.
       this.timeToFade = 500;
-      // Main (pixellated placeholder) image.
+      // The main image (pixelated placeholder).
       this.placeholderImg = $(img);
+      // Configure the main placeholder image.
+      this.initPlaceholder();
       // Kick off the optimization process.
       this.initOptimization();
     }
@@ -424,6 +426,32 @@
         $('<img>').on('load', $.proxy(this.renderFullSizeImg, this)).attr('src', this.placeholderImg.attr('src'));
       }
 
+      // ---------------------------------------- | Placeholder Image
+
+      /**
+       * Make necessary CSS adjustments to main placeholder image.
+       */
+
+    }, {
+      key: 'initPlaceholder',
+      value: function initPlaceholder() {
+        this.setPlaceholderCss();
+      }
+
+      /**
+       * The main image must have a position set for it to remain in front of the
+       * full-size image. We assume that if the element is not explicitly positioned
+       * absolutely, then it can safely be positioned relatively.
+       */
+
+    }, {
+      key: 'setPlaceholderCss',
+      value: function setPlaceholderCss() {
+        if (this.placeholderImg.css('position') != 'absolute') {
+          this.placeholderImg.css('position', 'relative');
+        }
+      }
+
       // ---------------------------------------- | Full-Size Image
 
       /**

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: imgix-optimizer
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Sean C Davis
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-07-30 00:00:00.000000000 Z
+date: 2018-07-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -37,7 +37,7 @@ files:
 - LICENSE
 - README.md
 - Rakefile
-- dist/imgix-optimizer-0.0.2.min.js
+- dist/imgix-optimizer-0.0.3.min.js
 - dist/imgix-optimizer.js
 - dist/index.html
 - dist/main.css