想要在使用JQuery加载表单时显示下载百分比的繁忙加载消息

Question

假设我的页面内容很大，所以在我的asp.net应用程序中，我希望显示忙碌图标，其中百分比下载客户端内容。我看到很多flash和sliver light网站显示繁忙的图标，并且它们显示的百分比表示在客户端计算机中加载了多少内容。我怎样才能使用JQuery实现这一点，当在客户端机器上下载页面内容时，忙碌图标会消失并显示实际的页面内容。

请用示例代码来实现它。感谢

Answer 1

我会推荐像Uploadify这样的东西。它确实需要一个flash插件。这是迄今为止最简单的方法。

http://www.uploadify.com/

以下是一个示例（ASP.NET MVC）：

http://blog.bobcravens.com/2010/02/upload-files-with-progress-using-uploadify/

[更新]如果您尝试延迟加载图像，请使用jquery lazyload插件。这仅加载当前查看区域中的图像。向下滚动时，它会获取下一个图像。我在我的博客页面上使用它。

http://blog.bobcravens.com

查看源代码，您将看到（在第13行附近）一个脚本，用于在所有帖子图像上设置延迟加载。

鲍勃

Answer 2

您可以拥有占位符图片，并且在加载所需图像时，您可以使用新来源替换占位符

var img = new Image();
img.src= "largerImage.png";  
img.onload = function() { oldImage.src = img.src; };

这可以更进一步，代码可以添加到图像本身

<img src="http://www.codedigest.com/img/loading.gif" 
 onload="var t = this; var img = new Image(); img.src ='http://hardgeek.org/wp-content/uploads/2010/07/firefox-logo-1024x969.jpg'; img.onload = function() { t.src = img.src }" />

这也可以更进一步，因为您可能无法像这样直接应用onload，只是一个建议。