模拟内容还未加载出来的动态小图画

最新推荐文章于 2025-07-12 14:00:51 发布

java_zhaoyanli

最新推荐文章于 2025-07-12 14:00:51 发布

阅读量352

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/51126772

AJAX 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的示例，展示了如何利用jQuery的load()方法来异步加载网页的头部和底部内容，从而实现更快速的页面加载体验，并提供了一段PHP和HTML混合代码作为参考。

PHP:

<?php
//jQuery中的load()方法只能接受服务器返回的HTML响应数据
header('Content-Type: text/html');

//模拟网速较慢的情形
sleep(5);
?>
<ul class="nav">
	<li><a href="#">首页</a></li>
	<li><a href="#">新闻</a></li>
	<li><a href="#">动态</a></li>
	<li><a href="#">产品大全</a></li>
</ul>

HTML:

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
 </head>

 <body>
	<div class="header">
		<img src="img/loading.gif">
	</div>
	<hr>
	<div class="main">
		<h3>这里是首页中的主体内容</h3>
		<p>阿里的设计费垃圾收电费了骄傲了啥地方军绿色的减肥了看见了三季度发垃圾的酸辣粉就流口水的减肥了坚实的路口附近了三等奖法律的设计费</p>
		<p>阿里的设计费垃圾收电费了骄傲了啥地方军绿色的减肥了看见了三季度发垃圾的酸辣粉就流口水的减肥了坚实的路口附近了三等奖法律的设计费</p>
	</div>
	<hr>
	<div class="footer">
		<img src="img/loading.gif">
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
	//页面加载完后后，异步请求header和footer
	$(function(){
		$('.header').load('2-header.php');
	});
	</script>
 </body>
</html>