0
A
回答
0
$(function(){
var ajax_load = "<img src='images/loading.gif' alt='loading...' />";
$('body').html(ajax_load);
var postData = $("#form").serialize();
$.ajax({
type: "POST",
url: "ajaxpage.php",
data: postData,
success: function(body){
$('body').html(body);
}
});
});
我相信这是你想要的。
0
结构上,这将是这样的:
- 装入DOM空容器,包括“加载图像”
- 加载的加载内容和填充容器
- 附加JavaScript文件JavaScript事件处理程序的所有链接来覆盖加载新页面的默认行为
但你会更好的使用某种框架。 “Hash Bang”(#!)是一种流行模式,请在Google上进行搜索。
祝你好运!
0
为了使它更明显,假设我们具有HTML页面,这个标记:
我们希望,当用户点击“加载内容”按钮,加载内容。因此,我们需要首先将点击事件绑定到该按钮,并且仅在它被触发后才发出AJAX请求。
$("#btnLoad").click(function(){
// Make AJAX call
$("#content").load("http://example.com");
});
他上面的代码加载内容从http://example.com进入。当页面被加载时,我们想要在“内容”中显示我们的动画GIF图像。因此,我们可以进一步提高我们的代码如下所示:
$("#btnLoad").click(function(){
// Put an animated GIF image insight of content
$("#content").empty().html('<img src="loading.gif" />');
// Make AJAX call
$("#content").load("http://example.com");
});
的.load()函数将与加载内容替换我们加载图像指标。
在这种情况下,您可能会使用jQuery的其他AJAX函数(如$ .ajax(),$ .get(),$ .post())来使用它们的回调函数来删除加载的图像/文本并追加加载的数据。
这里也是隐藏内容直到ajax调用完成才能显示内容的解决方案。
CSS:
<style type="text/css">
#content
{
display:none;
}
</style>
JQ:
$(function() {
var loadingImg = $('#loadingImage');
loadingImg.show();
$.ajax({
url: "secondpage.htm",
cache: false,
success: function (html) {
loadingImg.hide();
$("#content").append(html).fadeIn();
}
});
});
HTML:
<body>
<img src="loader.gif" id='loadingImage' alt='Content is loading. Please wait' />
<div id='content'>
</div>
</body>
相关问题
- 1. 页面加载
- 2. 页面加载
- 3. 加载页面
- 4. 页面加载
- 5. 页面加载
- 6. Jquery加载页面
- 7. 未加载页面
- 8. 未加载页面
- 9. ASP.NET页面加载
- 10. 在页面加载
- 11. 预加载页面
- 12. AJAX加载页面
- 13. Javascript:Slow加载页面
- 14. 在页面加载
- 15. ASP.Net页面加载
- 16. 下载javascript加载页面
- 17. 使用jquery激活第二个页面加载页面加载
- 18. 如何在加载父页面之前加载子页面?
- 19. 动态页面加载无法加载Java页面
- 20. 在jQueryMobile上加载并执行audio.js页面加载AJAX页面
- 21. 从ajax加载的子页面重新加载页面
- 22. jquery .get页面加载不加载在页面顶部
- 23. 在已加载的jquery页面中加载页面!
- 24. 在页面加载后立即再次加载页面
- 25. 页面加载()或页面初始化()
- 26. 阻止页面加载主页面css
- 27. 页面内的AJAX加载页面
- 28. jsp页面未从html页面加载
- 29. 页面只加载页面的一半
- 30. 如何在ajax中加载链接加载页面加载其他页面?
你能来,是只在页面加载时,没有点击按钮来显示内容,只是当页面加载... *感谢详细的代码与描述! – vladchooo 2011-05-18 16:18:18
是的。只是包装它而不是在点击功能只是在$(function(){//一旦页面准备就绪就执行}); – XGreen 2011-05-18 16:29:17
但是,只有当页面加载和我给出加载图片时,我才需要它?我需要显示加载图片,只有当页面加载 - 而不是显示白屏... – vladchooo 2011-05-18 16:32:16