这是相对基准图像加载时间的可行方法吗？

发布于 2024-12-22 20:28:36 字数 1616 浏览 0 评论 0原文

基本的事情是，我痴迷于跟踪我可以轻松地跟踪的所有内容......想要跟踪图像加载时间。我不期望/渴望完美（例如，对于每个图像加载，它都是 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>

原文

The basic thing is, I, being obsessed with keeping track of everything I can easily...want to keep track of image load times. I don't expect/desire perfection (e.g. It is 100% accurate, down to the millisecond, for every image load). The goal is relative accuracy (e.g. If between 10am-11am, the average is 100ms load time. It suddenly starts spiking to an average of 3s a few hours later, I'd like to know that sort of thing).

Thoughts if this solution is sufficient for that? Or did I miss something obvious?

Yes, I know it doesn't report anything anywhere...that isn't the purpose of the example code, it is merely to calculate the time.

Example Code:

<!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>

分享到QQ

分享到微博