如何在javascript中计算图像加载/渲染时间？

有没有办法使用javascript/jquery在网页中查找图像加载/呈现时间？

正确的答案是使用内置于浏览器（如Chrome或Firefox/Firebug）中的开发工具，这些工具将告诉您加载页面中的所有资源需要多长时间。这些工具可以访问纯javascript可以访问的更多信息

使用javascript，您可以精确地确定加载javascript指定的图像的时间。您无法使用javascript精确计算HTML中指定的图像的加载时间，因为没有精确的方法在图像开始加载的瞬间开始javascript时间测量

要对javascript中指定的图像计时，请执行以下操作：

var startTime = new Date().getTime();
var img = new Image();
img.onload = function() {
    var loadtime = new Date().getTime() - startTime;
    console.log("image took " + loadtime + "ms to load");
};
img.src = "http://www.whatever.com/testimg.jpg";

对于HTML中指定的图像，您所能做的最好是：

<script>
var startTime = new Date().getTime();
function doneLoading() {
    var loadtime = new Date().getTime() - startTime;
    console.log("image took " + loadtime + "ms to load");
};    
</script>
<img src="http://www.whatever.com/testimg.jpg" onload="doneLoading()">

var startTime=new Date（）.getTime（）；
函数doneLoading（）{
var loadtime=new Date（）.getTime（）-startTime；
log（“图像加载时间+加载时间+加载毫秒”）；
};    

上一示例中的

标记需要紧跟在

标记之前

但认真地说，使用Chrome或Firebug中的开发工具，您可以准确地看到加载所有页面资源所需的时间；

var resourceList = window.performance.getEntriesByType("resource");
           for (i = 0; i < resourceList.length; i++)
           {
              if (resourceList[i].initiatorType == "img")
              {
                 alert("End to end resource fetch: "+ (resourceList[i].responseEnd - resourceList[i].responseStart ));
              }
           }

对于（i=0；i

---

您可以参考上面的链接，在JSFIDLE上实现它。

不太准确，也不精确计算，但从pageload开始并在image onload事件结束的计时器将尽可能接近您所能。现在我确定我已经理解了，我删除了我的答案；）谢谢你你可以用dom highrestimestamp