如何在实际图像下载时显示加载图像

Question

有时候图片在浏览器中渲染需要一些时间。我想在实际图片下载期间显示一个忙碌的图像，在实际图片下载完毕后，将忙碌的图像删除，并显示实际图片。如何使用jQuery或任何JavaScript实现这个功能？

- Thomas

Answer 1

只需使用 CSS 为所有图像添加背景图像：

img {
  background: url('loading.gif') no-repeat;
}

- Gerben

---

它应该有助于ADF应用程序，在部分页面渲染时，JavaScript执行是不确定的。我一定会尝试的 :-). - Tapas Bose

如果一张图片有透明区域，那么在图片加载完成后，背景仍然可以被看到。 - JustAMartin

“@Martin 透明图片确实无法使用。” - Gerben

尽管在页面加载时使用JS脚本来去除背景图像是可行的。 - MasterT

这对响应式图片无效，您需要设置图像大小才能显示背景。 - dima

Answer 2

你可以像这样做：

// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

在图片加载完成之前，您可以先展示一个加载中的图片。您可以将load事件分配给图片，在图片加载完成时触发该事件。

- Sarfraz

---

我也使用过这种技术，效果非常好。只需要记得处理错误和中止情况... - will

@WearetheWorld 添加错误事件的处理程序。您可以像这样执行$(img).load(handler).error(handler)。请参阅http://api.jquery.com/error/。 - Tapas Bose

这对类选择器起作用吗？像 .images？ - Doug Molineux

很遗憾，.load 在这个上下文中已经从 jQuery 1.8 开始被弃用了。对于更新版本的 jQuery，请使用 .on('load', function(){ /* blah */ }); 来代替。 - Fluoxetine

Sarfraz，你可以根据@Fluoxetine的评论更新你的答案。这样它仍然可以是一个很好的答案。 - rpax

如何使用多个图像实现相同的效果？ - pavitran

Answer 3

我使用了与@Sarfraz所发表的类似的技术，不同的是我没有隐藏元素，而是仅操作我正在加载的图像的类。

<style type="text/css">
.loading { background-image: url(loading.gif); }
.loaderror { background-image: url(loaderror.gif); }
</style>
...
<img id="image" class="loading" />
...
<script type="text/javascript">
    var img = new Image();
    img.onload = function() {
        i = document.getElementById('image');
        i.removeAttribute('class');
        i.src = img.src;
    };
    img.onerror = function() {
        document.getElementById('image').setAttribute('class', 'loaderror');
    };
    img.src = 'http://path/to/image.png';
</script>

有时候在我的情况下，图片无法加载，因此我会处理onerror事件来更改图像类，以便显示一个错误背景图像（而不是浏览器的损坏图像图标）。

- Seth

---

这是不同的 - 你正在加载图像 在 页面 DOM 之外，然后将其从浏览器缓存移动到 img 元素上。如果图像具有某种 无缓存 的 HTTP 响应头，则该方法可能无法正常工作。 - Edward

Answer 4

与其仅使用https://dev59.com/F2445IYBdhLWcg3w6ebz#4635440中提到的引用方法，

You can do something like this:

// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

You assign load event to the image which fires when image has finished loading. Before that, you can show your loader image.

您可以使用不同的jQuery函数使加载图像淡出，然后被隐藏：

// Show the loading image.
$('#loader_img').show();

// When main image loads:
$('#main_img').on('load', function(){
  // Fade out and hide the loading image.
  $('#loader_img').fadeOut(100); // Time in milliseconds.
});

“一旦不透明度达到0，显示样式属性将被设置为none。” http://api.jquery.com/fadeOut/ 或者您可以不使用jQuery库，因为已经有简单的跨浏览器JavaScript方法可用。

- Edward

Answer 5

使用JavaScript构造函数，其中包含一个回调函数，当图像在后台加载完成时触发。我刚刚使用它，跨浏览器效果非常好。这里是带有答案的线程链接。

- bentedder