Question

...适用于不同的浏览器。

我想通过将src设置为图像然后计算错误输出所需的时间来纯粹在JavaScript中执行此操作。

我有一张图片需要很长时间才会加载，因此会出错。我通过反复试验了解网络上的这些信息，因此我可以将.src属性指向此图像，并查看抛出错误需要多长时间。

我知道如何使用以下方法捕获错误：

window.addEventListener("error", function (event) {
    if (event.target.tagName === 'IMG') {
    }
}, true);

但是我不知道最好的方法来计算抛出错误需要多长时间。

Answer 1

使用Date对象getTime函数获取开始和结束时间，然后在发生错误时从结尾开始减去：

(function(){
   var img = document.createElement("img");
   var start =(new Date()).getTime();
   img.onerror = function(){
      var end = (new Date()).getTime();
      console.log("Took "+(end-start)+" milliseconds");
   };
   img.src = "http://someimageurl.com/someimage.jpg";
})();

Answer 2

您还可以使用console.time({String})和console.timeEnd({String})：

console.time('some function');

someFunction();

console.timeEnd('some function');

// outputs ==> 7.624ms (or the like) in
// Chrome, and by default, the number is
// rounded in the Firefox console

从第一次将脚本加载到后续测试时，您将看到一个很大的区别，因为浏览器会缓存JS。此外，在我的系统上，每次测试的时间从1到5毫秒不等，因此您必须进行大量运行并获得平均值。

如何计算图像的最长下载时间？

2 个答案: