Blurry to awesome images

markup.html

<figure class="placeholder" data-large="{path to large image}">
	<img src="{path to small image}" class="img-small loaded" alt="{alt}" /> <!-- small image about 50px wide and height to match ratio; keep to less than 3k -->
	<div style="padding-bottom: {image ratio}%;"></div> <!-- ratio is height-in-px/width-in-px * 100 -->
</figure>

script.js

jQuery(document).ready(function($) {

	$('.placeholder').each(function(){

    		var imgLarge = new Image();
    		imgLarge.src = $(this).data('large');
    		imgLarge.onload = function () {
    			imgLarge.classList.add('loaded');
    		};
    		$(this).append(imgLarge);

  	});
  	
	return true;
});

styles.css

.placeholder {
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}

.placeholder img {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	transition: opacity 1s linear;
}

.placeholder img.loaded {
	opacity: 1;
}

.img-small {
	filter: blur(50px);
	/* this is needed so Safari keeps sharp edges */
	transform: scale(1);
}