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

How to display loading image while actual image is downloading

提问by Thomas

Sometimes images take some time to render in the browser. I want to show a busy image while the actual image is downloading, and when the image is downloaded, the busy image is removed and the actual image should be shown. How can I do this with JQuery or any javascript?

有时图像需要一些时间在浏览器中呈现。我想在下载实际图像时显示繁忙图像，下载图像时，删除繁忙图像并应显示实际图像。我怎样才能用 JQuery 或任何 javascript 做到这一点？

回答by Gerben

Just add a background image to all images using css:

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

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

回答by Sarfraz

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 loadevent to the image which fires when image has finished loading. Before that, you can show your loader image.

您将load事件分配给图像加载完成后触发的图像。在此之前，您可以显示您的加载程序图像。

回答by Seth

I use a similar technique to what @Sarfraz posted, except instead of hiding elements, I just manipulate the class of the image that I'm loading.

我使用与@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>

In my case, sometimes images don't load, so I handle the onerror event to change the image class so it displays an error background image (rather than the browser's broken image icon).

就我而言，有时图像无法加载，因此我处理 onerror 事件以更改图像类，以便显示错误背景图像（而不是浏览器损坏的图像图标）。

回答by Edward

Instead of just doing this quoted method from https://stackoverflow.com/a/4635440/3787376,

而不是仅仅从https://stackoverflow.com/a/4635440/3787376做这个引用的方法 ，

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 loadevent to the image which fires when image has finished loading. Before that, you can show your loader image.

你可以这样做：

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

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

您将load事件分配给图像加载完成后触发的图像。在此之前，您可以显示您的加载程序图像。

you can use a different jQuery function to make the loading image fade away, then be hidden:

您可以使用不同的 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.
});

"Once the opacity reaches 0, the display style property is set to none." http://api.jquery.com/fadeOut/

“一旦不透明度达到 0，显示样式属性将设置为无。” http://api.jquery.com/fadeOut/

Or you could not use the jQuery library because there are already simple cross-browser JavaScript methods.

或者您不能使用 jQuery 库，因为已经有简单的跨浏览器 JavaScript 方法。

回答by bentedder

Use a javascript constructor with a callback that fires when the image has finished loading in the background. Just used it and works great for me cross-browser. Here's the thread with the answer.

使用带有回调的 javascript 构造函数，该回调在图像在后台完成加载时触发。刚刚使用它并且对我来说跨浏览器非常有用。这是带有答案的线程。