<div class="content">
  <h1>Lazyload With Blur Effect</h1>
  <div class="thumbnail">
    <img data-src="https://unsplash.it/480/320?image=777" src="https://unsplash.it/12/8?image=777" alt="">
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);

html {
  font-family: 'Open Sans', sans-serif;
  background: mediumspringgreen;
  color: black;
}

h1 {
  text-align: center;
  font-size: 32px;
  font-size: 4vw;
}

.content {
  margin: 0 auto;
}

.thumbnail {
  width: 480px;
  margin: 0 auto;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
  }
}

$(function(){
  $(window).on('load', function(){
    $('[data-src]').each(function(){
      var $this = $(this),
          src = $(this).data('src');
      $this.attr('src', src);
      console.log(src);
    });
  });
});