如何在javascript中计算图像加载/渲染时间？ [英] how to calculate image loading/rendering time in javascript?

问题描述

有没有办法在网页中使用javascript / jquery查找图片加载/渲染时间？

Is there any way to find image loading/rendering time in a webpage using javascript/jquery?

推荐答案

正确答案这里是使用Chrome或Firefox / Firebug等浏览器中内置的开发工具，它们会告诉您页面中所有资源的加载时间。这些工具可以访问纯javascript可以访问的更多信息。

The right answer here is to use the development tools built into a browser like Chrome or Firefox/Firebug that will tell you how long all resources in the page are taking to load. Those tools have access to more information that pure javascript has access to.

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

With javascript, you can precisely time the loading of an image that is specified with javascript. You cannot use javascript to precisely time the loading of an image that is specified in your HTML because there is no precise way to start a javascript time measurement at exactly the instant that the image starts loading.

计算javascript中指定的图像：

To time an image specified in 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中指定的图像所能做的最好就是：

The best you could do for an image specified in HTML would be this:

<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()">

< script> 标签上一个示例需要紧接在< img> 标记之前。

The <script> tag in the previous example would need to be immediately before the <img> tag.

但严重的是，使用开发工具在Chrome或Firebug中，您可以确切地看到所有页面资源需要加载多长时间。

But seriously, use the development tools in Chrome or Firebug and you can see exactly how long all page resources are taking to load.

这篇关于如何在javascript中计算图像加载/渲染时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！