想实现Jquery 加载完页面内容再显示出内容来吗？使用 load函数即可实现
-05-21
话不多说，上图先。
第一步：
第二步 点击“load 1“按钮。出现"正在加载..."
第三步：加载完成
JS代码：
$(document).ready(function() {
$('#btnLoad1.button').click(function() {
$('#header').html("正在加载...");
//$('#load_content').load('/', );
$('#load_content').hide().load('', function(responseText, textStatus, XMLHttpRequest) {
//所有状态成功，执行此函数，显示数据 //textStatus四种状态 success、error、notmodified、timeout
if (textStatus == "error") {
var msg = "错误: ";
$('#header').html(msg + XMLHttpRequest.status + " " + XMLHttpRequest.statusText);
}
else if (textStatus == "timeout") {
var msg = "操时: ";
$('#header').html(msg + XMLHttpRequest.status + " " + XMLHttpRequest.statusText);
}
else {
$('#header').html("加载完成");
$(this).fadeIn();
}
});
});
});
HTML代码：
JQuery - Load
#header
{
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.buttonListArea
{
float: left;
width: 150px;
padding-right: 10px;
border-right: 1px solid #eee;
margin-right: 10px;
}
.button
{
cursor:pointer;
}
.buttonArea
{
margin: 10px;
padding-bottom: 20px;
}
#load_content
{
float: left;
width: 550px;
text-align: center;
}
-->
{
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #eee;
}
.buttonListArea
{
float: left;
width: 150px;
padding-right: 10px;
border-right: 1px solid #eee;
margin-right: 10px;
}
.button
{
cursor:pointer;
}
.buttonArea
{
margin: 10px;
padding-bottom: 20px;
}
#load_content
{
float: left;
width: 550px;
text-align: center;
}
