首页 > 代码库 > 关于页头页尾的异步加载

关于页头页尾的异步加载

在网站中许多页面的页头页尾,都是一样的。采用异步加载,减少代码复用率;

采用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"});

});

 

关于页头页尾的异步加载