Question

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

Answer 1

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

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

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事件分配给图像加载完成后触发的图像。在此之前，您可以显示您的加载程序图像。

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事件来更改图像类，以便它显示错误的背景图像（而不是浏览器的损坏的图像图标）。

Answer 4

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

您可以这样做：
// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});
您将load事件分配给图像具有的图像完成装载。在此之前，您可以显示您的加载程序图像。

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

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

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

Answer 5

使用带有回调的javascript构造函数，该回调在图像在后台加载完成时触发。刚刚使用它，对我来说非常适合跨浏览器。这是thread with the answer。

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

5 个答案: