Defer image loading

Source: https://varvy.com/pagespeed/defer-images.html

by katalin_2003

HTML

<div>
  <button id="btn">CHANGE IMAGE</button>
</div>
<!-- or another image -->
<div class="img-container">
  <span class="align-helper"></span><img class="defer-load" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://www.gravatar.com/avatar/5bad62e3159a5179590af9fa76b99670?s=32&d=identicon&r=PG"></div>

<div class="img-container">
  <span class="align-helper"></span><img class="defer-load" src="https://www.gravatar.com/avatar/2272a6dda4a161db846fdddf94c09c0e?s=32&d=identicon&r=PG" data-src="https://www.gravatar.com/avatar/5bad62e3159a5179590af9fa76b99670?s=32&d=identicon&r=PG">
</div>

<!-- this one will remain unchanged -->
<div class="img-container">
  <span class="align-helper"></span><img src="https://www.w3schools.com/images/compatible_chrome.gif">
</div>

CSS

* {
  box-sizing: content-box;
}

body {
  background-color: #e0e0e0;
}

.img-container {
  vertical-align: top;
  display: inline-block;
  background-color: lightblue;
  border: 1px solid #000;
  width: 160px;
  height: 160px;
  text-align: center;
}

.align-helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

JavaScript

function init() {
  // var imgDefer = document.getElementsByTagName('img');
  var imgDefer = document.getElementsByClassName('defer-load');
  for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute('data-src')) {
      imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
    }
  }
}

// For testing
var btn = document.getElementById("btn");
btn.onclick = init;

// Use this after testing
// window.onload = init;