<button id="load_images">Load Images</button>

<a href="http://pure-essence.net/2016/09/09/lazy-image-place…age-aspect-ratio/" target="_blank">Read my blog post for an explantion of the code.</a>
<div class="overall">
  <div><h1>With fix</h1>
    <div class="container with_placeholder_fix">
      <div class="featured">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placekitten.com/1600/900"
             class="lazy" width="1600" height="900" style="width: 1600px; height: 0; padding-top: 56.25%" />
      </div>
      <div class="thumbnails">
        <div>
          <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placekitten.com/800/450"
               class="lazy" width="800" height="450" style="width: 800px; height: 0; padding-top: 56.25%" />
        </div>
        <div>
          <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placekitten.com/400/225"
               class="lazy" width="400" height="225" style="width: 400px; height: 0; padding-top: 56.25%"/>
        </div>
      </div>
    </div>
  </div>
  
  <div><h1>Without fix</h1>
    <div class="container">

      <div class="featured">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placekitten.com/1600/900"
             class="lazy" width="1600" height="900" />
      </div>
      <div class="thumbnails">
        <div>
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placekitten.com/800/450"
             class="lazy" width="800" height="450" />
        </div>
        <div>
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="http://placekitten.com/400/225"
             class="lazy" width="400" height="225" />
        </div>
      </div>
    </div>
  </div>
</div>
@import 'compass';
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding: 1rem 2rem;
}

a {
  color: red;
}

img {
  max-width: 100%;
  height: auto;
}

.overall {
  > div {
    h1 {
      text-align: center;
    }
    border: 1px solid black;
    &:first-of-type {
      margin-bottom: 1rem;
    }
  }
}

@media only screen and (min-width: 640px) {
  .overall {
    @include display-flex();
    > div {
      &:first-of-type {
        margin-right: 1rem;
        margin-bottom: 0;
      }
      &:last-of-type {
        margin-left: 1rem;
      }
    }
  }
}

button {
  margin: 2rem;
  padding: 0.5rem 2rem;
}

.container {
  @include display-flex();
  max-width: 1200px;
  margin: 2rem auto;
}

.featured {
  @include flex(0 0 70%);
  margin-right: 1rem;
}

.thumbnails {
  @include flex(100 0 1px);
  img {
    display: block;
    margin-bottom: 1rem;
  }
}

// I'm adding these in the css to keep the example simple,
// but you can definitely add them via inline style attribute on the server side
.with_placeholder_fix {
  .lazy {
    &.loaded {
      width: 100% !important;
      height: auto !important;
      padding-top: 0 !important;
    }
  }
}

.lazy {
  background-color: #ccc;
  background-image: url(data:image/gif;base64,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);
  background-position: center center;
  background-repeat: no-repeat;
}
View Compiled
$('#load_images').on('click', function() {
  $('.lazy:not(.loaded)').each(function() {
    var $img = $(this);
    var dataSrc = $img.data('src');
    $img.attr('src', dataSrc).on('load', function () {
      $(this).addClass('loaded');
    });
  });
});

$('#unload_images').on('click', function() {
  $('.lazy.loaded').each(function() {
    var $img = $(this);
    var src = $img.attr('src');
    $img.removeClass('loaded').attr('src', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==').attr('data-src', src);
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js