Question

Resource Timing API提供报告页面上各个图片加载的时间。例如，在Chrome中加载此简化演示将报告加载图片所需的时间。

<!doctype HTML>
<head>
<title>Image Timing Test</title>
<script>
  function determineImageTiming(url) {
    var reportDiv = document.getElementById('report');
    if (window.performance.getEntriesByName) {
      var timer = window.performance.getEntriesByName(url);
      var imageLoadTime = timer[0]['responseEnd'].toFixed(0);      
      reportDiv.innerHTML = 'Image Loaded at: ' + imageLoadTime + 'ms';
    }
    else {
      reportDiv.innerHTML = "window.performance.getEntriesByName not available";
    }
  }
</script>

</head>
<body onload="determineImageTiming('http://lorempixel.com/20/20/abstract')">
  <img src="http://lorempixel.com/20/20/abstract">
  <div id="report">Measuring...</div>
</body>
</html>

（This jsfiddle在Chrome等支持该功能的浏览器中显示该功能。）

有没有办法模仿这种行为，即使它不太准确，也可以确定特定图片在不支持window.performance的浏览器中加载页面需要多长时间？

有没有办法测量资源计时API以外的图像加载时间？

0 个答案: