Question

我有一个页面，其中包含一个带有html的img持有者： -

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

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

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

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

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

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

或图像加载完成......

另外，我如何在图像占位符上放置div，以便

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

感谢

Answer 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事件分配给图像加载完成后触发的图像。在此之前，您可以显示您的消息/进度/加载器。

Answer 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>

使用jquery加载图像的图像

2 个答案: