jQuery 如何在加载 div #content 的同时显示 div #loading
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14454688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to show div #loading whilst div #content loads
提问by user1063287
i am wanting to implement a solution where:
我想实施一个解决方案，其中：
- whilst contents in div #content are loading,
- hide div #content,
- show div #loading,
- then when div #content has loaded,
- hide div #loading,
- fade in div #content
- 虽然 div #content 中的内容正在加载，
- 隐藏 div #content,
- 显示 div #loading,
- 然后当 div #content 加载时，
- 隐藏 div #loading,
- 淡入 div #content
i have tried:
我试过了：
html:
html：
<div id="content">
<!--this stuff takes a long time to load-->
<img src="http://lorempixel.com/1920/1920/">
</div>
<div id="loading">
<!-- this is the loading gif -->
<img src="http://lorempixel.com/400/200/">
</div>
js:
js：
// when user browses to page
$('#content').hide();
$('#loading').show();
// then when div #content has loaded, hide div #loading and fade in div #content
$('#content').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});
here is the jsfiddle i am working on:
这是我正在处理的 jsfiddle：
http://jsfiddle.net/rwone/Y9CQ4/
http://jsfiddle.net/rwone/Y9CQ4/
thank you.
谢谢你。
回答by Olaf Dietsche
According to .load(), the event should fire, when
根据.load()，事件应该触发，当
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
当一个元素和所有子元素都被完全加载时，加载事件被发送到一个元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和 window 对象。
So, you cannot bind the load event handler to a divtag. When you want the event handler to fire after the image has loaded, you must bind it to the image
因此，您不能将加载事件处理程序绑定到div标签。当您希望在图像加载后触发事件处理程序时，您必须将其绑定到图像
HTML:
HTML：
<div id="content">
<!--this stuff takes a long time to load-->
<img id="large" src="http://lorempixel.com/1920/1920/">
</div>
<div id="loading">
<!-- this is the loading gif -->
<img src="http://lorempixel.com/400/200/">
</div>
JS:
JS：
// when user browses to page
$('#content').hide();
$('#loading').show();
// then when the #content div has loaded
$('#large').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});
Or you can bind the event to the windowobject, which fires when
或者您可以将事件绑定到window对象，该对象在以下情况下触发
the page is fully loaded including graphics.
该页面已完全加载，包括图形。
JS:
JS：
$(window).bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});
Yet a third approach, would be to test if all images are loaded, when the load event fires
还有第三种方法，当加载事件触发时，测试是否加载了所有图像
function allImagesLoaded() {
var imgs = $(this).closest('div').find('img');
var loaded = 0;
imgs.each(function() { if ($(this.complete)) ++loaded; });
if (imgs.length == loaded) {
$('#loading').hide();
$('#content').fadeIn('slow');
}
}
// when user browses to page
$('#content').hide();
$('#loading').show();
// then when the #content div has loaded
$('#content img').bind('load', allImagesLoaded);
回答by Alireza Masali
for example at fisrt u have to fill the Picture in the DIV after u recieved your data from CODEBEHINF by JSON or Ajax or Javascript u can change it
例如，在您通过 JSON 或 Ajax 或 Javascript 从 CODEBEHINF 收到您的数据后，您必须在 DIV 中填写图片，您可以更改它
$('#DIV').html('<img src="images/loadinfo.gif" />');//here u fill the picture in ur div
$.get('Jquery.aspx', { command: 'CartLoader', Send_T: Send_T },
function (response) {
$('#DIV').html(response);// after receiving data from code behind u can change it
});
回答by Mana
Take a div with class loader
使用类加载器获取 div
CSS:
CSS：
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/loading.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .7;
}
JS:
JS：
function myFunction() {
$(".loader").show();
Ajax Call({
//Ajax Call Operation
success:function(result){
//Operation
}
complete: function(){
$(".loader").fadeOut("slow");
}
});
}
