how to call JS functions before loading the page

Question

how to call JS functions before loading the page

Navigation

#1 by (0 votes)

1

I am developing a web that I have a horizontal menu with a position : fixed , with a JS function that detects the scroll I change the color of the background to the menu so that it can be seen in a readable way, since by default the background is transparent but in some pages I need to start with a white background that I do with the same function that evaluates the scroll but my problem is that it takes a long time to execute the function as I put it in <body onload="calculaAlto()"> and the page takes about 2 seconds in loading, then the background color changes after 2 seconds which looks very bad. Does anyone know of any html or js event that helps me to run that function asynchronously to the rest of the DOM? . THANKS FROM ANTE HAND here is a part of the code.

function calculaAlto(bloque){
    var box = document.getElementById(bloque);
    var altoBox = box.scrollHeight;
    var menu = document.getElementById('menuh');
    var itemsMen = document.getElementsByClassName('titulosItemsMenu');
    var  logo = document.getElementById('logoimg');
    var subMenu = document.getElementsByClassName('subMenu-li');
        if(document.documentElement.scrollTop>=altoBox || document.body.scrollTop >= altoBox){
            menu.style.backgroundColor ="white";
            logo.src ="img/logo-praco-blue.png";
            subMenu[0].style.backgroundColor ="white";
            subMenu[1].style.backgroundColor ="white";
            menu.style.boxShadow = " 0px 2px 1px 0px rgba(0,0,0,0.5)";
                itemsMen[0].style.color ="#0E4B8E";
                itemsMen[1].style.color ="#0E4B8E";
                itemsMen[2].style.color ="#0E4B8E";
                itemsMen[3].style.color ="#0E4B8E";
                itemsMen[4].style.color ="#0E4B8E";
                itemsMen[5].style.color ="#0E4B8E";
                itemsMen[6].style.color ="#0E4B8E";
                itemsMen[7].style.color ="#0E4B8E";
        }else{
                menu.style.backgroundColor ="transparent";
                logo.src ="img/logo-praco-monochrome-white.png";
                subMenu[0].style.backgroundColor ="transparent";
                subMenu[1].style.backgroundColor ="transparent";
                menu.style.boxShadow = " 0px 0px 0px 0px rgba(0,0,0,0.5)";
                    itemsMen[0].style.color ="white";
                    itemsMen[1].style.color ="white";
                    itemsMen[3].style.color ="white";
                    itemsMen[4].style.color ="white";
                    itemsMen[5].style.color ="white";
                    itemsMen[6].style.color ="white";
                    itemsMen[7].style.color ="white";            
        }
}

with that function I change the background color to the menu and some other things

<html>
 <body onload="calculaAlto(n)">
<div id="menu"> contenido del menu(con position fixed) </div>
<div id="n"> mide 0px </div>
<div > mide 100px </div>
<div > mide 100px </div>
</body>
</html>

It's just an example of HTML since the real is much bigger but I hope you can understand my problem.
by default in this case the menu should start with a white background and if it does, but it takes a long time

javascript html5 css3

asked by Frank Campos Vilchez 22.08.2018 в 00:14

source

1 answer

Form in two steps, Show real-time image between Fields needs and Contact fields and Submit Activate postgresql TCP / IP connections

score 0 · Accepted Answer

You can approach it in several ways here an option:

A "loading" with CSS spinner of loading.io cover everything until you finish loading the page, make your calculations and for last you deactivate the "loading".

The z-index: 99999; is to be above your fixed menu.

function hacemoAlguna() {
  // simulamos tiempo de carga
  setTimeout(function() {
    document.getElementById('cargando').style.display = 'none';
  }, 2000);
}

#cargando {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  z-index: 99999;
}

.lds-dual-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<body onload="hacemoAlguna()">
  <div id="cargando">
    <div class="lds-dual-ring"></div>
  </div>
  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus finibus diam, ac vulputate orci interdum ac. Vestibulum ac fringilla libero, sit amet fringilla mi. Aenean eu tellus justo. Aenean tempus elit in nunc viverra vestibulum. Duis nisi
    sem, tristique vitae urna in, sagittis fermentum mauris. Nunc in sodales diam, nec dictum urna. Curabitur eget eleifend ligula, eu ultrices lacus. Vestibulum fermentum libero a congue finibus. Pellentesque et sagittis nulla. In a vestibulum tellus.
    Donec ac eros nisl. Cras ut nunc vitae arcu lacinia semper et at odio. Nam eget volutpat diam, eu gravida libero. Sed sit amet mauris massa. Fusce turpis odio, congue pellentesque augue ut, lacinia tempor purus. Nullam viverra velit dolor, a tincidunt
    nulla mattis eget. Proin dapibus nisl nec auctor gravida. Etiam ut pharetra eros. Integer a dolor vitae felis aliquam dictum. Nulla interdum, nisl non interdum dictum, nibh erat porttitor ante, at hendrerit eros ligula ac dui. Praesent sodales nunc
    nibh, non convallis arcu aliquam ut. Mauris placerat auctor vestibulum. Curabitur augue diam, commodo at ipsum vitae, aliquam rhoncus mauris. Vestibulum at metus in ipsum mattis volutpat pulvinar vel magna. Nullam tincidunt rutrum mi. Proin eu libero
    ut eros eleifend dapibus non ac turpis. Pellentesque pretium ante a feugiat feugiat. Maecenas sed ultrices quam. Aliquam erat volutpat. Phasellus mattis luctus ex eget gravida. Vivamus condimentum ultricies sollicitudin. Ut tempus massa sed neque
    fermentum porta. Aliquam maximus at nisl ac varius. Nunc in urna pulvinar, finibus lectus a, ullamcorper magna. Nullam massa purus, vestibulum laoreet sem ac, volutpat rutrum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
    per inceptos himenaeos. Integer bibendum consectetur elementum. Ut consequat lectus non ante vehicula venenatis. Sed vel nulla lacus. Ut dapibus diam velit, eget faucibus mauris commodo nec. Mauris blandit enim orci. Aenean at mi sagittis, placerat
    arcu aliquet, egestas velit. Nullam at diam eleifend, viverra purus nec, condimentum erat. Vestibulum placerat tristique leo eu ullamcorper. Integer placerat luctus augue, id convallis tellus varius non. Praesent aliquet ligula bibendum ante aliquet,
    et egestas dui egestas. Donec tellus mi, vulputate eu nunc at, cursus maximus sapien. Nam condimentum enim eu consequat euismod. Praesent id consectetur augue, a maximus risus. Nam euismod ligula non dui tincidunt suscipit. Aliquam ut nisl eget tortor
    consequat ultrices eu a nisl. Aliquam sed nulla quis arcu convallis cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean efficitur finibus nisi, ac faucibus risus vehicula at. Curabitur vulputate
    lectus velit, a pharetra nisi vehicula sed. Nam ultrices lobortis nisl, at condimentum lorem viverra vel. Cras metus nisl, scelerisque blandit odio tristique, commodo tristique enim. Ut dictum odio tellus, quis sagittis nulla congue id. Integer viverra
    tortor in pharetra laoreet. Etiam vel neque lectus. Donec suscipit fringilla quam quis porttitor. Fusce hendrerit quam nec justo dignissim accumsan. Mauris sollicitudin vehicula nisi a placerat.
  </div>
</body>

Another option is to put a tag <script> just after they load the things you need to calculate the height, the script is executed with what was loaded until then and then the load continues, but without knowing how it is or on what it is difficult to propose something.