2

我有一个用 HTML 声明的图像:

<img src="images/image_01.gif" id="man_img_file" width="400" height="300" alt="image_01" />

我正在通过 jQuery 更改图像:

$('#man_img_file').attr('src', "images/image_02.gif");

现在我想在图像加载时显示一个百分比进度条(即,当新的 src 图像通过 jQuery 加载时)。如何做到这一点?可以使用 jQuery 进度条来完成吗?

注意:图像已经在服务器中,我可以在加载之前通过 PHP 脚本获取图像大小。

4

2 回答 2

5

您可能无法添加进度条,因为我不知道仅使用 Javascript 来确定已加载多少图像的方法。

但是,您可以使用该Image对象并在新图像加载时显示一个旋转的“加载”gif:

function LoadNewImage(target, url) {
    var newImage = new Image();

    // some overlay div
    loadingOverlay.show();

    newImage.src = url;

    newImage.onload = function() {
        // image is loaded into browser memory, so will display instantly
        target.attr('src', url);

        // hide the overlay again
        loadingOverlay.hide();
    }
}

以下是一些可能有帮助的链接:

使用 javascript 预加载图像

显示加载覆盖

于 2012-10-16T00:09:08.543 回答
0

感谢劳伦斯的分享。

  1. 使用 jQuery 更改“src”属性时,无法动态检查加载的字节数(使用 javascript)。
  2. 但是,在加载图像时,可以显示加载消息/图像。(查看上面的劳伦斯答案以获得解决方案)
  3. 正如 Laurence 所说,“如果您对 HTML5 和 IE9 以上的任何内容感到满意,您显然可以使用 XHR 来做到这一点:http: //blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events /(请参阅此处的示例:http: //blogs.adobe.com/webplatform/files/XHRProgressSample.html ?file=XHRProgressSample.html )”
于 2012-10-17T19:32:52.647 回答