关于更改图像的 jQuery 进度条 .attr('src')

Question

我有一个用 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 脚本获取图像大小。

Answer 1

您可能无法添加进度条，因为我不知道如何确定仅使用 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();
    }
}

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

Preload images with javascript

Show a loading overlay

Answer 2

感谢Laurence分享。

1. 使用 jQuery 更改“src”属性时，加载的字节数无法即时检查（使用 javascript）。
2. 但是，在加载图像时，可以显示加载消息/图像。 （查看上面 Laurence 的答案以获得解决方案）
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）”