计时跨域页面加载时间

Question

我想从客户端使用JavaScript时间加​​载另一个域的时间。我知道你可以通过使用“script”和“img”标签的“src”属性来做到这一点，但我不知道一旦加载完成（或一旦失败）如何获得回调。

我已经看到加载外部内容的大多数解决方案都是服务器端，但我试图在客户端执行此操作。

Answer 1

如果你只是想要一个回调，当调用完成，而不是真的需要读取服务器响应，你可以使用script或img标签的OnloadOnAbortOnError事件。

var i=new Image(1,1); 
i.src = url; 
i.onload = function(){ 
    alert('load complete') 
}; 
i.onabort = function(){ 
    aletrt('aborted') 
} 

Answer 2

如果您希望以编程方式确定文件何时加载，则可以使用jQuery - 使用load方法。

否则，您可以使用所有主流浏览器的开发人员工具查看所有图像和脚本的加载时间。

Answer 3

您只需将事件侦听器附加到元素的load事件。例如：

function imgLoaded(){ 
    //do something cool 
} 

var img = new Image; 
img.addEventListener("load", imageLoaded, false); 

你可以看到这个here的一个例子。图像最初通过display:none隐藏，这意味着它不会开始获取。然后，使用JS创建一个Image对象，将事件侦听器附加到load事件，然后将其源设置为与img标记的源相同。一旦完全加载，将显示<img>。你会发现尽管它是一个非常大的图像，它立即显示出来 - 这是因为它在加载事件被触发前才被隐藏。