Показать только на одной странице (JavaScript)

Question

Проблема, с которой я сталкиваюсь, состоит в том, что у меня есть 3 страницы, панель инструментов (dashi.html), статистика и журнал. У меня есть диаграмма, которая занимает много места в памяти и снижает производительность приложения, диаграмма $("#dash").load("dashi.html");.

То, что я пытаюсь достичь, только отображает этот контент из dashi.html, когда пользователь находится на странице панели мониторинга или хочет получить доступ к странице панели мониторинга. Затем он должен оставаться бездействующим на всех других страницах.

Как я могу сделать dashi.html только для просмотра на домашней странице, а не для других страниц, то есть работать только на домашней странице и простаивать, если их не просматривать?

Ниже я написал код JQuery. Он отлично работает, но dashi.html вызывает огромные проблемы .. Для

<script> 

$(function() { 

    $("#dash").load("dashi.html"); 

    $('#selectTable').hide(); 
    $('#database').hide(); 
    $('#dash').show(); 

    $('a#dashboard').on('click', function() { 
     $('.active').removeClass('active'); 
     $('#selectTable').hide(); 
     $('#database').hide(); 
     $('#dash').show(); 
    }); 

    $('a#stats').on('click', function() { 
     $('.active').removeClass('active'); 
     $('#database').hide(); 
     $('#dash').hide(); 
     $('#selectTable').show(); 
    }); 
    $('a#log').click(function() { 
     $('.active').removeClass('active'); 
     $('#dash').hide(); 
     $('#selectTable').hide(); 
     $('#database').show(); 
    }); 
    var pres_row = 0; 
    $('[data-row]').on('click', function() { 
     var row = $(this).attr('data-row'); 
     $('.active').removeClass('active'); 
     $('#table' + row).addClass('active'); 

     if (row !== pres_row) { 
      // clear the currently running interval if any 
      if ('diagramInterval' + pres_row in window) { 
       clearInterval(window['diagramInterval' + pres_row]); 
      } 
      pres_row = row; 
      // load again only if not loaded 
      if ('diagram' + pres_row in window) { 
       window['diagram' + pres_row](); 
      } else { 
       $.getScript("SensorTables/diagram" + pres_row + ".js", function() { 
        window['diagram' + pres_row](); 
       }); 
      } 

     } 
    }); 

}); 

</script> 

Answer 1

Вы должны использовать окно размытие и фокус события:

$(function() { 
 
    $(window).on("blur focus", function(e) { 
 
    if ($(this).data("prevEvent") !== e.type) { //fix events double firing issues 
 
     switch (e.type) { 
 
     case "blur": 
 
      $('body').append('<div style="color:gray">window is inactive...</div>'); 
 
      break; 
 
     case "focus": 
 
      $('body').append('<div style="color:red">window is active again...</div>'); 
 
      break; 
 
     } 
 
    } 
 
    $(this).data("prevEvent", e.type); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

You может перестать показывать анимацию и делать другие тяжелые задачи при размывании окна и продолжить работу после фокуса.