使用 jquery 加载图像信息答案

【问题标题】：image loading information with jquery使用 jquery 加载图像信息
【发布时间】：2011-01-02 16:54:25
【问题描述】：

我有一个带有 html 的 img 持有者的页面：-

<img src="someimage.jpeg" alt="image" class="show_image"/>

现在我正在使用代码用 jquery 更新图像...

$('.show_image').attr('src', 'anotherimage.jpeg');

现在它工作正常，但我想向用户展示正在加载的图像并且可能会等待

因为图像尺寸可能很大......

jquery中是否有任何方法可以获取加载百分比（读取/剩余字节数）的信息

或者如果图片加载完成...

另外我怎样才能在图像占位符上放置一个 div，这样

div可以淡化图像（不透明度：0.8）并在div上添加一些文本作为加载或其他东西

谢谢

【问题讨论】：

只是好奇使用灯箱是否适合您？大多数灯箱插件会让你使用加载图像，并会做淡入淡出、标题等等。 leandrovieira.com/projects/jquery/lightbox 是最好的之一。

标签： javascript jquery html image

【解决方案1】：

你可以这样做：

// change image
$('.show_image').attr('src', 'anotherimage.jpeg');
// image is loading
$('#divID').html('Image is being loaded....');

// image loaded
$('.show_image').load(function(){
  // hide/remove the message
  $('#divID').html('');
});

您将load 事件分配给图像完成加载时触发的图像。在此之前，您可以显示您的消息/进度/加载器。

【讨论】：

如果我反复更改图像，则会多次调用加载函数...例如 pradyut.dyndns.org/original_image.jsp#imgid=202 查看控制台日志...

【解决方案2】：

据我所知，这种信息应该由浏览器提供，现在您可以通过 img 的 OnLoad 属性在加载完成时收到通知> 标签。但我认为，您无法获得准确的下载数据量。

我建议您像这样更改您的代码：

<img src="someimage.jpeg" alt="image" class="show_image"/>

$('.show_image').attr('src', 'tiny.gif'); // a very small gif animation as loading indicator

$('.show_image').attr('src', 'anotherimage.jpeg');

另一种解决方案是像这样预加载大图像：

<html>
<head>
 <script type='text/javascript'>
   var image = new Image();
   image.src = "anotherimage.jpeg";
 </script>
</head>
<body>
 <img src="someimage.jpeg" alt="image" class="show_image"/>
 <script type='text/javascript'>
   $('.show_image').src = image.src; // no delay for loading happens
 </script>     
</html>
</body>

【讨论】：

非常感谢...任何我可以淡入或动画（.showimage）的东西...谢谢顺便说一句...
这类动画效果有很多库，我用的是Scriptaculous（基于prototype的），google一下就可以了。