有时候图片在浏览器中渲染需要一些时间。我想在实际图片下载期间显示一个忙碌的图像,在实际图片下载完毕后,将忙碌的图像删除,并显示实际图片。如何使用jQuery或任何JavaScript实现这个功能?
只需使用 CSS 为所有图像添加背景图像:
img {
background: url('loading.gif') no-repeat;
}
你可以像这样做:
// show loading image
$('#loader_img').show();
// main image loaded ?
$('#main_img').on('load', function(){
// hide/remove the loading image
$('#loader_img').hide();
});
在图片加载完成之前,您可以先展示一个加载中的图片。您可以将load
事件分配给图片,在图片加载完成时触发该事件。
$(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所发表的类似的技术,不同的是我没有隐藏元素,而是仅操作我正在加载的图像的类。
<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事件来更改图像类,以便显示一个错误背景图像(而不是浏览器的损坏图像图标)。
img
元素上。如果图像具有某种 无缓存 的 HTTP 响应头,则该方法可能无法正常工作。 - Edward与其仅使用https://dev59.com/F2445IYBdhLWcg3w6ebz#4635440中提到的引用方法,
您可以使用不同的jQuery函数使加载图像淡出,然后被隐藏: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.
// 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.
});