关于页头页尾的异步加载
Posted 橘子红
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于页头页尾的异步加载相关的知识，希望对你有一定的参考价值。
在网站中许多页面的页头页尾，都是一样的。采用异步加载，减少代码复用率；
采用PHP+html+jQuery
方法：
1.在名为header.php的页面中：写入页头部分的html
<?php header(‘Content-Type:text/html;charset=UTF-8;‘); ?> <div id="top"> <p>页头部分html代码</p> </div>
2.在页面中index.html中：指定要引入页头的位置 其中图片为页面没加载出来时：提示正在加载的图片
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>第一个页面</title> <link rel="stylesheet" href="css/commont.css">//引入css文件 </head> <body> <div id="header"> <img src="image/loader.gif" alt=""> </div> <script src="js/common.js"></script>//引入js文件 </body> </html>
3.common.js
$(‘#header‘).load(‘header.php‘);
一个页面异步请求头部完毕
在其他页面中加载页头，同样需要指明页头的位置
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>第二个页面</title> <link rel="stylesheet" href="css/commont.css">//引入css文件 </head> <body> <div id="header"> <img src="image/loader.gif" alt=""> </div> <script src="js/common.js"></script>//引入js文件 </body> </html>
这样既可实现多个页面异步加载页头，异步加载页尾方法同上；
注意：
由于异步加载的头部元素不在dom树上，在对异步加载的头部元素进行操作时，要用事件代理来写
即，找到dom树上的元素进行绑定：
$(‘#header‘).on(‘mouseenter‘,‘#top>p‘,function(){ $(this).css({color："red"}); });
以上是关于关于页头页尾的异步加载的主要内容，如果未能解决你的问题，请参考以下文章