关于更改图像的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();
    }
}

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

使用javascript预加载图像

显示加载叠加层