计算图像加载进度不起作用

Posted 2023-05-09

【中文标题】计算图像加载进度不起作用

【英文标题】：Calculate Image load progress not woking

【发布时间】：2013-03-05 03:42:25

【问题描述】：

我正在尝试在加载大图像时显示进度条，以了解它的加载量，但根据我在此处的所有谷歌搜索和搜索，我没有找到我要查找的内容。

我可以添加加载 gif，直到它加载然后更改使用

$('img').load(function() 
    // my code here

我也用过：

 $(function() 
     $( "#progressbar" ).progressbar(
        value: 37
     );
 )

但我不知道如何计算使用 javascript 或 jquery 加载单个图像的百分比。

感谢大家的帮助

【问题讨论】：

您可以先发送一个较短的请求并计时。例如，您知道在不久的将来您将需要一个 100kb 的图像；所以用无缓存加载它，并测量接收所需的时间。然后通过一些简单的数学运算，您可以估计另一张图像需要多长时间，并且有一个草率的进度条（总比没有好）。另一种选择可能是网络套接字。

【参考方案1】：

您可以执行以下操作，以加载图像以及图像并显示进度：

$.each(arrayOfImageUrls, function(index, value) 
    $('<img></img>').attr('src', value)    //load image
        .load(function() 
            percentCounter = (index / arrayOfImageUrls.length) * 100;    //set the percentCounter after this image has loaded
            $('#yourProgressContainer').text(percentCounter + '%');
        );
);