Medium style image loading.

functionality.js

window.onload = function() {

  var placeholder = $('.progressive-media'),
      small = $('.progressive-media__small');

  var img = new Image();
  img.src = small.src;
  img.onload = function () {
   small.classList.add('loaded');
  };

  var imgData = placeholder.data('large');
  var imgLarge = '<img class="progressive-media__large" src="'+ imgData +'" />';

  small.after(imgLarge);

  $(".progressive-media__large").load(function() {
    $(this).addClass('loaded');
  });

};

structure.html

<div class="progressive-media" data-large="http://placekitten.com/1400/600">
  <img src="http://placekitten.com/100/20" class="progressive-media__small" />
</div>

style.scss

.progressive-media {
    position: relative;

    &__small {
        opacity: 1;
        -webkit-filter: blur(50px);
                filter: blur(50px);
    }

    &__large {
        opacity: 0;
    }

    img {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity 1.3s linear;
        pointer-events: none;

        .no-js & {
            opacity: 1;
        }

        &.loaded {
            opacity: 1;
        }
    }

}