calculate image load time

HTML

<img src="http://images.freeimages.com/images/previews/441/lakeside-sunset-1-1387112.jpg" />
<img src="http://images.freeimages.com/images/previews/023/west-texas-sunset-1312912.jpg" />

<output>Measuring...</output>

CSS

img {
  display: block;
  height: 100px;
  width: 100px;
  margin-bottom: 10px;
}

JavaScript

function checkPerformance() {
  var reportDiv = document.querySelector('output');
  if (window.performance.getEntriesByName) {
    var resourceList = window.performance.getEntriesByType("resource");
    var textnode = '',
      totalTimeTaken = 0;
    for (i = 0; i < resourceList.length; i++) {
      if (resourceList[i].initiatorType == "img") {
        totalTimeTaken += resourceList[i].responseEnd - resourceList[i].responseStart;
        textnode += "<p>Image_" + i + ": " + (resourceList[i].responseEnd - resourceList[i].responseStart).toFixed(2)+ " ms</p>";

      }
    }
    textnode += "<p><strong>Total Time Taken: " + totalTimeTaken.toFixed(2) + " ms</strong></p>";
    reportDiv.innerHTML = textnode;
  } else {
    reportDiv.innerHTML = "window.performance.getEntriesByName not available";

  }
}


window.onload = checkPerformance();