In general, the task was to block all content on the page until it loads. Made a full page div, which after loading is assigned display: none;

<script> window.onload = function() { document.getElementById('blocker').style.display = "none"; }; </script>

But the following problem arose, when I go to the next page using ajax and come back, this script is not executed and the content remains blocked. How to make this script run? Or maybe you can do something differently?

  • one
    To execute a function after ajax, you need to run it after ajax. Find the place in the code where the current page is replaced - and write the code there. - Pavel Mayorov

1 answer 1

Why not show / hide overlay when xhr events occur, not pages?

 function getXmlHttp(){ var xmlhttp; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(E) { xmlhttp = false; } } if(!xmlhttp && typeof XMLHttpRequest != 'undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } var overlay = document.getElementById('overlay'); var req = getXmlHttp() req.onreadystatechange = function() { switch(this.readyState) { case 1: //Перед началом ajax-запроса overlay.style.display = 'block'; break; case 4: //После окончания ajax-запроса overlay.style.display = 'none'; if(this.status == 200) { console.log('Данные получены'); } else { console.log('Произошла ошибка'); } break; } } req.open('GET', 'https://openexchangerates.org/api/currencies.json?r=' + + Math.random(), true); req.send(null); 
 #overlay { width: 300px; height: 300px; border: 1px solid black; display: none; } 
 <div id="overlay"></div>