Progressive Image Loading

index.html

<h4 class="text-center">Enable throttling in your dev tools to better see the effect</h4>
<div class="container">
		<div class="row">
			<div class="col-sm-4">
				<div class="progressive-image">
					<div class="loadingImage"
						 style="background: url('https://res.cloudinary.com/sourcetoad/image/upload/v1483582294/frog-sm_sg9llg.jpg')"
						 data-image="https://res.cloudinary.com/sourcetoad/image/upload/v1483582295/frog-lg_ikekce.jpg">
					</div>
					<div class="overlay"></div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="progressive-image">
					<div class="loadingImage"
						 style="background: url('https://res.cloudinary.com/sourcetoad/image/upload/v1483582294/frog-2-sm_zjphps.jpg')"
						 data-image="https://res.cloudinary.com/sourcetoad/image/upload/v1483582295/frog-2-lg_vahxhg.jpg">
					</div>
					<div class="overlay"></div>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="progressive-image">
					<div class="loadingImage"
						 style="background: url('https://res.cloudinary.com/sourcetoad/image/upload/v1483582294/frog-3-sm_xsjmqo.jpg')"
						 data-image="https://res.cloudinary.com/sourcetoad/image/upload/v1483582295/frog-3-lg_cgu28a.jpg">
					</div>
					<div class="overlay"></div>
				</div>
			</div>
		</div>
	</div>

progressive-image-loading.markdown

Progressive Image Loading

A Pen by Phil Sanders on CodePen.

License.

script.js

$(function(){

  $('.progressive-image').each(function(){

    var image = new Image();
    var previewImage = $(this).find('.loadingImage');
    var newImage = $(this).find('.overlay');

    image.onload = function(){
      newImage.css('background-image', 'url(' + image.src + ')');
      newImage.css('opacity', '1');
      console.log('complete');
    };

    image.src = previewImage.data('image');

  });

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

.container {
	margin-top: 20px;
}

.progressive-image {
	position: relative;
	overflow: hidden;
}

.progressive-image div {
  width: 100%;
	padding-top: 100%;
	background-size: cover!important;
	background-position: center bottom!important;
}

.progressive-image .loadingImage {
	filter: blur(5px);
}

.progressive-image .overlay {
	position: absolute;
  top: 0;
	opacity: 0;
	transition: opacity 200ms ease-in;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />