Update image dimensions inside of a timeout to ensure image replacement is rendered on screen before measuring

assets/gaussholder.js

@@ -64,6 +64,29 @@ window.Gaussholder = (function (header) {
 		};
 	};
 
+	/**
+	 * Recalculate image ratio when an image renders on the page.
+	 *
+	 * @param {HTMLImageElement} Image element to recalculate dimensions for.
+	 */
+	var calculateDimensionStyle = function (element) {
+		var actual = element.getBoundingClientRect();
+		var size = element.dataset.gaussholderSize.split(',');
+		var width = parseInt( size[0], 10 ), height = parseInt( size[1], 10 );
+
+		if ( actual.width < width ) {
+			// Rescale, keeping the aspect ratio
+			height = height * ( actual.width / width );
+			width = actual.width;
+		} else if ( actual.height < height ) {
+			// Rescale, keeping the aspect ratio
+			width = width * ( actual.height / height );
+			height = actual.height;
+		}
+
+		element.style.cssText += 'width: ' + width + 'px; height: ' + height + 'px;';
+	};
+
 	/**
 	 * Render placeholder for an image
 	 *
@@ -82,25 +105,14 @@ window.Gaussholder = (function (header) {
 		element.style.height = final[1] + 'px';
 
 		// ...then recalculate based on what it actually renders as
-		var original = [ final[0], final[1] ];
-		if ( element.width < final[0] ) {
-			// Rescale, keeping the aspect ratio
-			final[0] = element.width;
-			final[1] = final[1] * ( final[0] / original[0] );
-		} else if ( element.height < final[1] ) {
-			// Rescale, keeping the aspect ratio
-			final[1] = element.height;
-			final[0] = final[0] * ( final[1] / original[1] );
-		}
-
-		// Set dimensions, _again_
-		element.style.width = final[0] + 'px';
-		element.style.height = final[1] + 'px';
+		calculateDimensionStyle( element );
 
+		// Schedule an observer to update on any rendering changes.
 		render(canvas, element.dataset.gaussholder.split(','), final, function () {
 			// Load in as our background image
 			element.style.backgroundImage = 'url("' + canvas.toDataURL() + '")';
 			element.style.backgroundRepeat = 'no-repeat';
+			setTimeout( function() { calculateDimensionStyle( element ); }, 200 );
 		});
 	};