网站闪烁，因为 header 代码是从不同的文件加载的

Question

我正在从头开发一个网站，我意识到与其在每个 html 页面中使用 header（横幅+水平导航菜单）代码，不如使用它会更有效率在一个单独的 HTML 文件中，并在每个页面的 body 中使用 JS 加载功能，因此我可以仅在一个文件中修改 header 以将更改应用到整个网站，而不是浪费时间修改它在每一页上。

问题是因为我使用 :

进行了更改

<script>
$("#header").load("header_eng.html");
</script>

在每个页面的 body（其中 header_eng 是一个包含我的 header 代码的 html 文件），我的网站开始在每个页面之间 "blink" .现在，当我浏览网站时，横幅图像，例如，页面之间 blinks/flickers 而不是停留在那里。

当我的 header 代码在每个页面的代码中时，我没有遇到这个问题。

这是每个页面文件中都带有 header 代码的网站示例： https://cbrieuc.github.io/index.html （第一个示例只有前两个页面可用，所以只需向 link "About Me" 或 "News" 发送垃圾邮件来检查 blinking）

这里用 "load" 函数代替： https://cbrieuc.github.io/index_eng.html

这是使用 "load function"

的页面的代码

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <title>BRIEUC COUILLEROT</title>

    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="header"></div></br>
<div id=corps>
<pre>
test
</pre>
</div>

<!--loading header from header.html-->
<script>
$("#header").load("header_eng.html");
</script>

</body>

</html>

知道发生了什么吗？顺便说一下，我对网络开发还很陌生！

Answer 1

这是因为 javascript 是在页面加载后执行的。您需要使用 php

等服务器端语言包含头文件

网站闪烁，因为 header 代码是从不同的文件加载的

website blinks since header code is loaded from a different file

html

javascript

include

flicker

blink