Recently, I encountered a situation where I had a bootstrap navbar stored in a separate file, specifically named navbar.html. I utilized Jquery.load() to load this navbar into my HTML page.
At the bottom of my HTML page, I included the following code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$("#navbar-partial").load("navbar.html");
});
</script>
The HTML page also contains
<div id="navbar-partial"></div>Following the navbar-partial, there is a main-content div with the remaining content on the page. Unfortunately, the main-content loads before the navbar, resulting in a visually unappealing appearance. Although inserting the navbar code directly into each file would resolve this issue by allowing it to load first and quickly, I prefer to centralize the code in one file to avoid repetitive editing.
Do you have any suggestions on how to ensure that the navbar-partial loads faster or first? I attempted moving the script tags to the head section but to no avail.
Thank you for any help or advice!