I am developing a website from scratch and I realized that instead of having the header (banner+horizontal navigation menu) code in each html page, it would be more efficient to have it in a separate HTML file and use the JS load function in every page's body, so I can modify the header in only one file to apply changes to the whole website instead of wasting time modifying it on every page.
problem is since I made that change using :
<script>
$("#header").load("header_eng.html");
</script>
in every page's body (where header_eng is an html file containing my header code), my website started to "blink" between each page. Now when I navigate the website, the banner image, for example, blinks/flickers between pages instead of just staying there.
I did not have this problem when my header code was in every page's code.
here is the example of the website with the header code in every page file : https://cbrieuc.github.io/index.html (only the two first pages are up for the first example so just spam the link "About Me" or "News" to check for blinking)
and here with the "load" function instead : https://cbrieuc.github.io/index_eng.html
here is what the code looks like for a page using the "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>
Any idea what occured? by the way i'm quite new to web development!
It is because the javascript is being executed after page load. You need to include your header file using a server side language like php