optimize page load

bpsib · Jul 5, 2018 · a8f0cc3 · a8f0cc3
1 parent a2732be
commit a8f0cc3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/app.js b/app.js
@@ -1,13 +1,13 @@
+//console.log("app.js loaded");
 function switchPage(page) {
     //console.log("switch page");
     $(".contentDiv").empty();
     $(".contentDiv").append("<div data-include='" + page + "'></div>");
     processIncludes();
-    //collapse the responsive navbar after clicking a link
-    $('.navbar-collapse').collapse('hide');
 }
 
 function processIncludes() {
+    //console.log("processIncludes");
     $("[data-include]").each(function () {
         var that = $(this);
         that.load(that.attr('data-include'), function () {
@@ -16,17 +16,6 @@ function processIncludes() {
     });
 }
 
-$(function () {
-    var hash = window.location.hash;
-    console.log(hash);
-    var pagetoshow = 0;
-    if (hash !== undefined && hash !== "") {
-        switchPage(hash.replace("#", "") + ".html");
-    } else {
-        processIncludes();
-    }
-});
-
 function doCommonGSearches(el){
     var autogvalue = el.val();
     var gurl = 'https://www.google.com?#q=';
@@ -37,3 +26,24 @@ function doCommonGSearches(el){
      window.open(gurl + autogvalue + '+ict', '_blank');
      window.open(gurl + autogvalue + '+pronto hex', '_blank');
 }
+
+function pageLoaded(){
+    //console.log("pageLoaded");
+    var hash = window.location.hash;
+    if (hash !== undefined && hash !== "") {
+        switchPage(hash.replace("#", "") + ".html");
+    } else {
+        processIncludes();
+    }
+}
+
+$(window).on('hashchange', function(e) {
+    //collapse the responsive navbar after clicking a link
+    $('.navbar-collapse').collapse('hide');
+    //load content
+    pageLoaded();
+});
+
+$(function () {
+    pageLoaded();
+});
diff --git a/navbar.html b/navbar.html
@@ -11,35 +11,35 @@
       <ul class="navbar-nav mr-auto">
 
         <li class="nav-item">
-            <a class="nav-link" href="#" onclick="switchPage('learning.html');">New codes</a>
+            <a class="nav-link" href="#learning">New codes</a>
           </li>
         <li class="nav-item">
-            <a class="nav-link" href="#" onclick="switchPage('technical.html');">Technical</a>
+            <a class="nav-link" href="#technical">Technical</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#" onclick="switchPage('layouting.html');">Layout</a>
+            <a class="nav-link" href="#layouting">Layout</a>
           </li>
 
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             No infrared port?
           </a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="#" onclick="switchPage('audio.html');">3.5mm Audio</a>
+            <a class="dropdown-item" href="#audio">3.5mm Audio</a>
             <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#" onclick="switchPage('bluetooth.html');">Bluetooth</a>
+            <a class="dropdown-item" href="#bluetooth">Bluetooth</a>
             <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#" onclick="switchPage('wifi.html');">WiFi</a>
+            <a class="dropdown-item" href="#wifi">WiFi</a>
           </div>
         </li>
         <li class="nav-item">
-            <a class="nav-link" href="#" onclick="switchPage('trouble.html');">Troubleshooting</a>
+            <a class="nav-link" href="#trouble">Troubleshooting</a>
           </li>
         <li class="nav-item">
-          <a class="nav-link" href="#" onclick="switchPage('beta.html');">Beta</a>
+          <a class="nav-link" href="#beta">Beta</a>
         </li>
         <li class="nav-item">
-            <a class="nav-link" href="#" onclick="switchPage('contact.html');">Contact</a>
+            <a class="nav-link" href="#contact">Contact</a>
           </li>
       </ul>
       <button class="btn btn-outline-success my-2 my-sm-0" type="submit" onclick="window.open('https://play.google.com/store/apps/details?id=net.binarymode.android.irplus', '_blank');">Install</button>