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

有时图像需要一些时间在浏览器中呈现。 我想在下载实际图像的同时显示忙碌的图像，下载图像时，忙图像将被删除，并显示实际的图像。 我怎样才能做到这一点与JQuery或任何JavaScript？

Answer 1

你可以做这样的事情：

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

将load事件分配给图像加载完成时触发的图像。 在此之前，你可以显示你的装载机图像。

Answer 2

只需添加一个背景图像使用CSS的所有图像：

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

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. }); 

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

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

Answer 5

使用带有callback的JavaScript构造函数，当图像在后台加载完成时触发。 只是使用它，并为我跨浏览器的伟大工程。 这是与答案的线程 。