更改图像.attr('src')的jQuery进度栏 [英] jQuery progressbar on changing image .attr('src')

问题描述

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

I have an image declared in HTML as:

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

我正在通过jQuery更改图像:

I'm changing the image through jQuery:

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

现在，我想在图像加载时(即，通过jQuery加载新的src图像时)显示进度条.如何做到这一点?可以使用jQuery进度条完成吗?

Now I want to display a percentage progress bar while the image loads (ie. while the new src image loads through jQuery). How can this be achieved? Can it be done using the jQuery progressbar?

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

Note: The images are already in the server and I can get the image size through a PHP script prior loading it.

推荐答案

感谢 Laurence 可以共享.

1. 在使用jQuery更改'src'属性时，无法即时(使用javascript)检查加载的字节数 .
2. 但是，在加载图像时，可以显示加载消息/图像. (请查看上述Laurence的答案以获取解决方案)
3. 如Laurence所说，如果您对HTML5和IE9以上的版本感到满意，则显然可以使用XHR做到这一点: http://blogs.adobe.com/webplatform/files/XHRProgressSample.html?file=XHRProgressSample.html )"

1. While changing the 'src' attribute with jQuery, the amount of bytes loaded cannot be checked on the fly (with javascript).
2. However, while the image is being loaded, a loading message/image can be displayed. (Check the Laurence's answer above for the solution)
3. As Laurence says, "If you're happy with HTML5 and anything above IE9 you can apparently do this with an XHR: http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/ (see the sample here: http://blogs.adobe.com/webplatform/files/XHRProgressSample.html?file=XHRProgressSample.html)"

这篇关于更改图像.attr('src')的jQuery进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！