-
  var images = [
    {width: 234, height: 120},
    {width: 333, height: 111},
    {width: 500, height: 420},
    {width: 640, height: 250},
    {width: 280, height: 280},
  ]

.parent
  for image in images
    .child(style='flex:'+(image.width/image.height)+';max-width:'+image.width+'px;')
      - var paddingTop = image.height / image.width * 100;
      .placeholder(style='padding-bottom:'+paddingTop+'%;')
        img(data-src='//dummyimage.com/'+image.width+'x'+image.height)

body {
  margin: 0;
}
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.child {
  margin: 5px;
}
.placeholder {
  background: #2f2f2f;
  position: relative;
}
.placeholder:before {
  font-family: sans-serif;
  content: 'Loading...';
  text-align: center;
  position: absolute;
  padding-top: 20px;
  display: block;
  width: 100%;
  color: #fff;
}
img {
  position: absolute;
  max-width: 100%;
}

let images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
  setTimeout(() => {
    let image = images[i];
    image.setAttribute('src', image.getAttribute('data-src'));
  }, (i + 1) * 1000);
}