これは相対的なベンチマーク画像ロード時間の実行可能な方法ですか？

基本的なことは、私は簡単にすべてを追跡することに夢中です...イメージの読み込み時間を把握したいと思っています。完全性は望んでいません（たとえば、100％正確で、すべての画像負荷に対してミリ秒までです）。目標は相対的な正確さです（たとえば、午前10時から午前11時までは平均100ミリ秒ですが、突然数時間後に平均3秒にスパイクが始まります）。これは相対的なベンチマーク画像ロード時間の実行可能な方法ですか？

この解決策が十分であると思っていますか？それとも、私は何かが分かりにくいのですか？

はい、私はどこでも何も報告しないことを知っています...それはサンプルコードの目的ではなく、単に時間を計算することです。

コード例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Image Timing Test Page</title> 
</head> 
<body style='background-color: black; color: white;'> 
This is a page. 

<div class='test' id='t1'> 
    <img id="1" src='/test.jpg' /> 
</div> 

<div class='test' id='t2'> 
    <img id='2' src='/test2.jpg' /> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="/jquery.imagesloadded.js" type="text/javascript"></script> <!-- https://github.com/desandro/imagesloaded --> 
<script> 

var Performance = window.performance.timing; 

function ImageLoadTime(ImageTime, id) 
{ 
    if(Performance.loadEventEnd > 0) 
    {  
     console.log("Image Load Time ["+id+"] " + (ImageTime-Performance.navigationStart) + " milliseconds"); 
    } 
    else 
    { 
     setTimeout(function(){ImageLoadTime(ImageTime, id)},250); 
    } 
} 

$(document).ready(function() { 
    $('.test').each(function(index) 
    { 
     var temp = $(this).attr('id'); 
     $(this).imagesLoaded(function($images) 
     { 
      var d = new Date(); 
      ImageLoadTime(d.getTime(), temp); 
     }); 
    }); 
}); 

</script> 
</body> 
</html>

出典

2011-12-24 ReadWriteCode