imgix-optimizer 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6630b32252b9019d7cdcb4b0652f7d2dcf2dd09176f624cbbdfa64f041b3dcbb
-  data.tar.gz: 9715b46c1e2520797153afdbbb1a679646417a8ea1876504cce8959009011455
+  metadata.gz: 003e3c834f09df27d2057b68bc0c63dd599503d513b8e18944596ca7d700e033
+  data.tar.gz: 56d0c88dc28b460a13c362bdcc773f125f1aad805ca9e2301e90adc6560377dc
 SHA512:
-  metadata.gz: 6c8152c7c744eb1e66a8a136330044e6a96ea75842622421904aa4709d9a5bdfc4e66c397e3a80e7f1cefb96b1ac052664d81e7fba875345e937c7e82b5cc624
-  data.tar.gz: 94fcbdfb69bc9c3fd5934bcd9a969982d9e3e0d7b6d2c3d43363c8d95c2d779b7b8b641a9793b71fc9d92f4064924f33422026d8462a6ad34bd094899af50b93
+  metadata.gz: df9b55aaad2f6c893ce732d78d2bead5370c713469ea61d494e29797a819174783318e1b473c60f28b5a419ee8fcaf01791171b9b020ea51c87b34a1f2fcdcdf
+  data.tar.gz: 4c920564345f22588833ad4eaf2c75714397b59e5c19f004f5567e726fced26d8a4fe6413d87163a0f2583bd8e7d6db86f022d2ee31362bfb2515beae7d57c83

data/Gemfile.lock

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

data/dist/imgix-optimizer-0.0.7.min.js

@@ -0,0 +1 @@
+!function(){"use strict";var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},t=function(){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}}(),n=function(){function e(t){i(this,e),this.timeToFade=500,this.processingAttr="data-imgix-img-processed",this.placeholderImg=$(t),0<this.placeholderImg.height()?this.init():this.placeholderImg.on("load",$.proxy(this.init,this))}return t(e,[{key:"init",value:function(){this.initPlaceholder(),this.initOptimization()}},{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.listenForIntersection,this)).attr("src",this.placeholderImg.attr("src"))}},{key:"listenForIntersection",value:function(){new IntersectionObserver($.proxy(this.onIntersection,this)).observe(this.placeholderImg[0])}},{key:"onIntersection",value:function(t,e){var i=$(t[0].target);t[0].isIntersecting&&!$(i).attr(this.processingAttr)&&(i.attr(this.processingAttr,!0),this.renderFullSizeImg())}},{key:"initPlaceholder",value:function(){this.wrapPlaceholder(),this.setPlaceholderCss()}},{key:"wrapPlaceholder",value:function(){this.tmpWrapper=$("<div>").css({position:"relative",height:this.placeholderImg[0].getBoundingClientRect().height,width:this.placeholderImg[0].getBoundingClientRect().width,margin:this.placeholderImg.css("margin")}),this.placeholderImg.wrap(this.tmpWrapper)}},{key:"setPlaceholderCss",value:function(){"absolute"!=this.placeholderImg.css("position")&&this.placeholderImg.css("position","relative"),this.placeholderImg.css({margin:0})}},{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:"100%",height:"100%"})}},{key:"getPlaceholderImgRect",value:function(){return{width:this.placeholderImg[0].getBoundingClientRect().width,height:this.placeholderImg[0].getBoundingClientRect().height}}},{key:"setFullSizeImgSrc",value:function(){var t=this.placeholderImg.attr("src").replace(/(\?|\&)(w=)(\d+)/i,"$1$2"+this.getPlaceholderImgRect().width).replace(/(\?|\&)(h=)(\d+)/i,"$1$2"+this.getPlaceholderImgRect().height);t.search(/(\?|\&)(h=)(\d+)/i)<0&&(t=t+"&h="+this.getPlaceholderImgRect().height+"&fit=crop"),this.fullSizeImg.attr("ix-src",t),this.fullSizeImg.addClass("img-responsive imgix-optimizing"),this.fullSizeImg.removeAttr("data-optimize-img")}},{key:"addFullSizeImgToDom",value:function(){this.fullSizeImg.insertBefore(this.placeholderImg)}},{key:"initTransition",value:function(){var t=this;this.fullSizeImg.on("load",function(){return t.transitionImg()}),imgix.init()}},{key:"transitionImg",value:function(){var t=this;if(!this.placeholderImg)return!0;this.fadeOutPlaceholder(),setTimeout(function(){t.removeFullSizeImgProperties(),t.removeImg()},this.timeToFade)}},{key:"fadeOutPlaceholder",value:function(){this.placeholderImg.fadeTo(this.timeToFade,0)}},{key:"removeFullSizeImgProperties",value:function(){this.fullSizeImg.removeAttr("style"),this.fullSizeImg.removeClass("imgix-optimizing")}},{key:"removeImg",value:function(){this.placeholderImg&&(this.placeholderImg.remove(),this.placeholderImg=void 0)}},{key:"unwrapImg",value:function(){this.fullSizeImg.css("margin",this.tmpWrapper.css("margin")).unwrap()}}]),e}(),o=function(){function e(t){i(this,e),this.timeToFade=500,this.processingAttr="data-imgix-bg-processed",this.dpr=window.devicePixelRatio||1,this.largestImageWidth=0,this.el=$(t),"none"!=this.el.css("background-image")&&(this.initEl(),this.initOptimization(),this.initEventListeners())}return t(e,[{key:"initOptimization",value:function(){$("<img>").on("load",$.proxy(this.listenForIntersection,this)).attr("src",this.placeholderImgUrl)}},{key:"listenForIntersection",value:function(){new IntersectionObserver($.proxy(this.onIntersection,this)).observe(this.el[0])}},{key:"onIntersection",value:function(t,e){var i=$(t[0].target);t[0].isIntersecting&&!$(i).attr(this.processingAttr)&&($(i).attr(this.processingAttr,!0),this.renderTmpPlaceholderEl())}},{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.parentStyles={display:this.el.parent().css("display"),position:this.el.parent().css("position")},this.el.parent().css({display:"block",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.addClass("imgix-optimizing"),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(){if(!(this.fullSizeImgUrl&&this.el.outerWidth()*this.dpr<=this.largestImageWidth)){this.largestImageWidth=this.el.outerWidth()*this.dpr;var t=this.placeholderImgUrl.split("?"),e=t[t.length-1].split("&"),i={};for(var n in e.map(function(t){return i[t.split("=")[0]]=t.split("=")[1]}),this.el.outerWidth()>=this.el.outerHeight()?(i.w=this.largestImageWidth,delete i.h):(i.h=this.el.outerHeight()*this.dpr,delete i.w),e=[],i)e.push(n+"="+i[n]);return this.fullSizeImgUrl=t[0]+"?"+e.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 t=this;this.fadeOutTmpPlaceholderEl(),setTimeout(function(){t.updateElImg(),t.replaceElTmpCss(),t.replaceContainerTmpCss(),t.removeTmpEls()},this.timeToFade)}},{key:"fadeOutTmpPlaceholderEl",value:function(){this.tmpPlaceholderEl.fadeTo(this.timeToFade,0)}},{key:"updateElImg",value:function(){var e=this;this.setFullSizeImgUrl(),$("<img>").on("load",function(t){return e.el.css("background-image","url('"+e.fullSizeImgUrl+"')")}).attr("src",this.placeholderImgUrl)}},{key:"replaceElTmpCss",value:function(){this.el.css("background-color",this.elBgColor)}},{key:"replaceContainerTmpCss",value:function(){this.el.parent().css({display:this.parentStyles.display,position:this.parentStyles.position})}},{key:"removeTmpEls",value:function(){this.tmpPlaceholderEl.remove(),this.tmpFullSizeEl.remove(),this.tmpPlaceholderEl=void 0,this.tmpFullSizeEl=void 0}},{key:"initEventListeners",value:function(){var e=this;this.initResizeEnd(),$(window).on("resizeEnd",function(t){return e.updateElImg()})}},{key:"initResizeEnd",value:function(){$(window).resize(function(){this.resizeTo&&clearTimeout(this.resizeTo),this.resizeTo=setTimeout(function(){$(this).trigger("resizeEnd")},500)})}}]),e}();!function(d,f){function a(t){this.time=t.time,this.target=t.target,this.rootBounds=t.rootBounds,this.boundingClientRect=t.boundingClientRect,this.intersectionRect=t.intersectionRect||{top:0,bottom:0,left:0,right:0,width:0,height:0},this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,i=e.width*e.height,n=this.intersectionRect,o=n.width*n.height;this.intersectionRatio=i?Number((o/i).toFixed(4)):this.isIntersecting?1:0}function t(t,e){var i,n,o,r=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(r.root&&1!=r.root.nodeType)throw new Error("root must be an Element");this._checkForIntersections=(i=this._checkForIntersections.bind(this),n=this.THROTTLE_TIMEOUT,o=null,function(){o||(o=setTimeout(function(){i(),o=null},n))}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(r.rootMargin),this.thresholds=this._initThresholds(r.threshold),this.root=r.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" ")}function e(t,e,i,n){"function"==typeof t.addEventListener?t.addEventListener(e,i,n||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,i)}function i(t,e,i,n){"function"==typeof t.removeEventListener?t.removeEventListener(e,i,n||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,i)}function v(t){var e;try{e=t.getBoundingClientRect()}catch(t){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):{top:0,bottom:0,left:0,right:0,width:0,height:0}}function n(t,e){for(var i=e;i;){if(i==t)return!0;i=I(i)}return!1}function I(t){var e=t.parentNode;return e&&11==e.nodeType&&e.host?e.host:e}"IntersectionObserver"in d&&"IntersectionObserverEntry"in d&&"intersectionRatio"in d.IntersectionObserverEntry.prototype?"isIntersecting"in d.IntersectionObserverEntry.prototype||Object.defineProperty(d.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return 0<this.intersectionRatio}}):(t.prototype.THROTTLE_TIMEOUT=100,t.prototype.POLL_INTERVAL=null,t.prototype.USE_MUTATION_OBSERVER=!0,t.prototype.observe=function(e){if(!this._observationTargets.some(function(t){return t.element==e})){if(!e||1!=e.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:e,entry:null}),this._monitorIntersections(),this._checkForIntersections()}},t.prototype.unobserve=function(e){this._observationTargets=this._observationTargets.filter(function(t){return t.element!=e}),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},t.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},t.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},t.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,i){if("number"!=typeof t||isNaN(t)||t<0||1<t)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==i[e-1]})},t.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},t.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(e(d,"resize",this._checkForIntersections,!0),e(f,"scroll",this._checkForIntersections,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in d&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(f,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},t.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,i(d,"resize",this._checkForIntersections,!0),i(f,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},t.prototype._checkForIntersections=function(){var l=this._rootIsInDom(),h=l?this._getRootRect():{top:0,bottom:0,left:0,right:0,width:0,height:0};this._observationTargets.forEach(function(t){var e=t.element,i=v(e),n=this._rootContainsTarget(e),o=t.entry,r=l&&n&&this._computeTargetAndRootIntersection(e,h),s=t.entry=new a({time:d.performance&&performance.now&&performance.now(),target:e,boundingClientRect:i,rootBounds:h,intersectionRect:r});o?l&&n?this._hasCrossedThreshold(o,s)&&this._queuedEntries.push(s):o&&o.isIntersecting&&this._queuedEntries.push(s):this._queuedEntries.push(s)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},t.prototype._computeTargetAndRootIntersection=function(t,e){if("none"!=d.getComputedStyle(t).display){for(var i,n,o,r,s,l,h,a,c=v(t),u=I(t),p=!1;!p;){var m=null,g=1==u.nodeType?d.getComputedStyle(u):{};if("none"==g.display)return;if(u==this.root||u==f?(p=!0,m=e):u!=f.body&&u!=f.documentElement&&"visible"!=g.overflow&&(m=v(u)),m&&(i=m,n=c,void 0,o=Math.max(i.top,n.top),r=Math.min(i.bottom,n.bottom),s=Math.max(i.left,n.left),l=Math.min(i.right,n.right),a=r-o,!(c=0<=(h=l-s)&&0<=a&&{top:o,bottom:r,left:s,right:l,width:h,height:a})))break;u=I(u)}return c}},t.prototype._getRootRect=function(){var t;if(this.root)t=v(this.root);else{var e=f.documentElement,i=f.body;t={top:0,left:0,right:e.clientWidth||i.clientWidth,width:e.clientWidth||i.clientWidth,bottom:e.clientHeight||i.clientHeight,height:e.clientHeight||i.clientHeight}}return this._expandRectByRootMargin(t)},t.prototype._expandRectByRootMargin=function(i){var t=this._rootMarginValues.map(function(t,e){return"px"==t.unit?t.value:t.value*(e%2?i.width:i.height)/100}),e={top:i.top-t[0],right:i.right+t[1],bottom:i.bottom+t[2],left:i.left-t[3]};return e.width=e.right-e.left,e.height=e.bottom-e.top,e},t.prototype._hasCrossedThreshold=function(t,e){var i=t&&t.isIntersecting?t.intersectionRatio||0:-1,n=e.isIntersecting?e.intersectionRatio||0:-1;if(i!==n)for(var o=0;o<this.thresholds.length;o++){var r=this.thresholds[o];if(r==i||r==n||r<i!=r<n)return!0}},t.prototype._rootIsInDom=function(){return!this.root||n(f,this.root)},t.prototype._rootContainsTarget=function(t){return n(this.root||f,t)},t.prototype._registerInstance=function(){},t.prototype._unregisterInstance=function(){},d.IntersectionObserver=t,d.IntersectionObserverEntry=a)}(window,document),"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(t,e){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var i=Object(t),n=1;n<arguments.length;n++){var o=arguments[n];if(null!=o)for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(i[r]=o[r])}return i},writable:!0,configurable:!0});var e=function(){function e(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};i(this,e),this.initDependencies(),this.initOptions(t),this.optimizeImages(),this.optimizeBgImages()}return t(e,[{key:"initDependencies",value:function(){}},{key:"initOptions",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.options=t;var e={parent:"body"};for(var i in e)e.hasOwnProperty(i)&&!this.options[i]&&(this.options[i]=e[i])}},{key:"optimizeImages",value:function(){$(this.options.parent+" img[data-optimize-img]").each(function(t,e){new n(e)})}},{key:"optimizeBgImages",value:function(){return $(this.options.parent+" [data-optimize-bg-img]").each(function(t,e){new o(e)}),!0}}]),e}();window.Imgix=window.Imgix||{},Imgix.Optimizer=e}();

data/dist/imgix-optimizer.js

@@ -35,25 +35,40 @@
       this.processingAttr = 'data-imgix-img-processed';
       // The main image (pixelated placeholder).
       this.placeholderImg = $(img);
-      // Configure the main placeholder image.
-      this.initPlaceholder();
-      // Kick off the optimization process.
-      this.initOptimization();
+      // Wait for the image to load prior to kicking off the optimization process.
+      if (this.placeholderImg.height() > 0) {
+        this.init();
+      } else {
+        this.placeholderImg.on('load', $.proxy(this.init, this));
+      }
     }
 
     /**
-     * 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
-     * listening for the image to intersect the viewport.
+     * Configure the main placeholder image and kick off the optimization process.
      */
 
 
     createClass(Image, [{
+      key: 'init',
+      value: function init() {
+        this.initPlaceholder();
+        this.initOptimization();
+      }
+
+      /**
+       * 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
+       * listening for the image to intersect the viewport.
+       */
+
+    }, {
       key: 'initOptimization',
       value: function initOptimization() {
         $('<img>').on('load', $.proxy(this.listenForIntersection, this)).attr('src', this.placeholderImg.attr('src'));
       }
 
+      // ---------------------------------------- | Lazy Loading Control
+
       /**
        * When the placeholder image intersects the viewport, begin processing.
        * (IntersectionObserver and Object.assign() are not supported by IE, but the
@@ -91,14 +106,34 @@
     }, {
       key: 'initPlaceholder',
       value: function initPlaceholder() {
+        this.wrapPlaceholder();
         this.setPlaceholderCss();
-        this.setPlaceholderParentTmpCss();
+      }
+
+      /**
+       * Wrap the placeholder image in a <div>. This enables better control over the
+       * wrapping element and provides a more fluid transition process.
+       */
+
+    }, {
+      key: 'wrapPlaceholder',
+      value: function wrapPlaceholder() {
+        this.tmpWrapper = $('<div>').css({
+          position: 'relative',
+          height: this.placeholderImg[0].getBoundingClientRect().height,
+          width: this.placeholderImg[0].getBoundingClientRect().width,
+          margin: this.placeholderImg.css('margin')
+        });
+        this.placeholderImg.wrap(this.tmpWrapper);
       }
 
       /**
        * 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.
+       *
+       * And temporarily remove any margin from the image, as the box model gets
+       * delegated to the temporary wrapper during the transition period.
        */
 
     }, {
@@ -107,24 +142,7 @@
         if (this.placeholderImg.css('position') != 'absolute') {
           this.placeholderImg.css('position', 'relative');
         }
-      }
-
-      /**
-       * The parent of the image container should be relatively positioned
-       * (temporarily) so temp image can be absolutely positioned.
-       */
-
-    }, {
-      key: 'setPlaceholderParentTmpCss',
-      value: function setPlaceholderParentTmpCss() {
-        this.parentStyles = {
-          display: this.placeholderImg.parent().css('display'),
-          position: this.placeholderImg.parent().css('position')
-        };
-        this.placeholderImg.parent().css({
-          display: 'block',
-          position: 'relative'
-        });
+        this.placeholderImg.css({ margin: 0 });
       }
 
       // ---------------------------------------- | Full-Size Image
@@ -263,8 +281,9 @@
         this.fadeOutPlaceholder();
         setTimeout(function () {
           _this2.removeFullSizeImgProperties();
-          _this2.replacePlaceholderParentTmpCss();
           _this2.removeImg();
+          // this.unwrapImg();
+          // 215 x 161.3 // 215 x 161 // 216.66 x 163
         }, this.timeToFade);
       }
 
@@ -291,19 +310,6 @@
         this.fullSizeImg.removeClass('imgix-optimizing');
       }
 
-      /**
-       * Reset the container's adjusted CSS properties.
-       */
-
-    }, {
-      key: 'replacePlaceholderParentTmpCss',
-      value: function 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.
        */
@@ -317,6 +323,16 @@
         this.placeholderImg.remove();
         this.placeholderImg = undefined;
       }
+
+      /**
+       * Remove the temporary wrapper and and give the margin back to the image.
+       */
+
+    }, {
+      key: 'unwrapImg',
+      value: function unwrapImg() {
+        this.fullSizeImg.css('margin', this.tmpWrapper.css('margin')).unwrap();
+      }
     }]);
     return Image;
   }();

data/dist/inline-test.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js">
+  <!--<![endif]-->
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Inline Test</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" />
+    <style>
+      .inline-img {
+        width: 250px;
+        margin: 30px;
+      }
+    </style>
+
+    <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.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <img
+        class="inline-img"
+        src="https://images.unsplash.com/photo-1513791222152-c347a9d6c3dd?auto=format,compress&w=12&h=9&fit=crop"
+        data-optimize-img
+      />
+      <img
+        class="inline-img"
+        src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?auto=format,compress&w=10&h=10&fit=crop"
+        data-optimize-img
+      />
+    </div>
+
+    <script>
+      (function() {
+        new Imgix.Optimizer();
+      })();
+    </script>
+  </body>
+</html>

data/dist/main.css

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

data/package.json

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

data/src/image.js

@@ -6,9 +6,19 @@ export default class Image {
     this.processingAttr = 'data-imgix-img-processed';
     // The main image (pixelated placeholder).
     this.placeholderImg = $(img);
-    // Configure the main placeholder image.
+    // Wait for the image to load prior to kicking off the optimization process.
+    if (this.placeholderImg.height() > 0) {
+      this.init();
+    } else {
+      this.placeholderImg.on('load', $.proxy(this.init, this));
+    }
+  }
+
+  /**
+   * Configure the main placeholder image and kick off the optimization process.
+   */
+  init() {
     this.initPlaceholder();
-    // Kick off the optimization process.
     this.initOptimization();
   }
 
@@ -23,6 +33,8 @@ export default class Image {
       .attr('src', this.placeholderImg.attr('src'));
   }
 
+  // ---------------------------------------- | Lazy Loading Control
+
   /**
    * When the placeholder image intersects the viewport, begin processing.
    * (IntersectionObserver and Object.assign() are not supported by IE, but the
@@ -51,34 +63,37 @@ export default class Image {
    * Make necessary CSS adjustments to main placeholder image.
    */
   initPlaceholder() {
+    this.wrapPlaceholder();
     this.setPlaceholderCss();
-    this.setPlaceholderParentTmpCss();
+  }
+
+  /**
+   * Wrap the placeholder image in a <div>. This enables better control over the
+   * wrapping element and provides a more fluid transition process.
+   */
+  wrapPlaceholder() {
+    this.tmpWrapper = $('<div>').css({
+      position: 'relative',
+      height: this.placeholderImg[0].getBoundingClientRect().height,
+      width: this.placeholderImg[0].getBoundingClientRect().width,
+      margin: this.placeholderImg.css('margin')
+    });
+    this.placeholderImg.wrap(this.tmpWrapper);
   }
 
   /**
    * 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.
+   *
+   * And temporarily remove any margin from the image, as the box model gets
+   * delegated to the temporary wrapper during the transition period.
    */
   setPlaceholderCss() {
     if (this.placeholderImg.css('position') != 'absolute') {
       this.placeholderImg.css('position', 'relative');
     }
-  }
-
-  /**
-   * 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'
-    });
+    this.placeholderImg.css({ margin: 0 });
   }
 
   // ---------------------------------------- | Full-Size Image
@@ -190,8 +205,9 @@ export default class Image {
     this.fadeOutPlaceholder();
     setTimeout(() => {
       this.removeFullSizeImgProperties();
-      this.replacePlaceholderParentTmpCss();
       this.removeImg();
+      // this.unwrapImg();
+      // 215 x 161.3 // 215 x 161 // 216.66 x 163
     }, this.timeToFade);
   }
 
@@ -212,16 +228,6 @@ export default class Image {
     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.
    */
@@ -232,4 +238,11 @@ export default class Image {
     this.placeholderImg.remove();
     this.placeholderImg = undefined;
   }
+
+  /**
+   * Remove the temporary wrapper and and give the margin back to the image.
+   */
+  unwrapImg() {
+    this.fullSizeImg.css('margin', this.tmpWrapper.css('margin')).unwrap();
+  }
 }