Run functions only when the page is loaded

Asked

Viewed 35 times

1

Hello, I am looking for some way to perform a certain function, only when the page is 100% loaded, I have already tested the document.addEventListener("DOMContentLoaded", function(event) { and the window.onload but both cause the function to be executed along with page loading. I know this because favicon keeps running until the function is finished running. Does anyone know how to do this kind of asynchronous functions in vannila js?

Code of the page:

/*
//Função original ligada o snippet
function sha256(){
return "oi";
// a função sha256 é de uma lib externa que não consegui importar no stack
}*/
document.addEventListener("DOMContentLoaded", function(event) {
  var noonce = 0;
  const minzeros = 5;
  const dataforjob = "dfgfdgsdfg";
  var jobstatus = false;
  var verify = "";
  for (var i = 1; i <= minzeros; i++) {
    verify = verify + "0";
  }
  while (!jobstatus) {
    const block = sha256(dataforjob + noonce);
    const stringfortest = block.substring(0, minzeros);
    if (stringfortest == verify) {
      jobstatus = true;
    } else {
      noonce++;
    }
  }
  console.log(noonce);
  console.log(sha256(dataforjob + noonce));
});
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
}

div.topHeader {
  display: flex;
  background: #f5811e;
  padding: 5px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

div.topHeader i {
  color: #fff;
  font-size: 25px;
}

div.topHeader p {
  margin-left: 10px;
  font-size: 25px;
  color: #FFF;
}

div.pageContent {
  display: flex;
  height: 100%;
  flex-direction: row;
}

div.pageContent .imageContent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 50%;
}

div.pageContent .textsContent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 48%;
}

.mainTitle:not(:nth-child(1)) {
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
}

.mainTitle:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
}

div.redirectionBox {
  background: #44b8ab;
  border: 1px solid #009c77;
  border-radius: 3px;
  margin-bottom: 20px;
  padding: 8px;
}

div.bodyContent {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.header {
  padding: 5px;
  text-align: center;
  border-top: 1px solid #ccc;
  background: #ebebeb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js"></script>
<html>

<head>
  <title>NetSafe - Device Check</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div class="bodyContent">
    <div class="topHeader">
      <p>NetSafe</p>
    </div>
    <div class="pageContent">
      <div class="imageContent">
        <img src="#" title="Robot" width="250">
      </div>
      <div class="textsContent">
        <div class="texts">
          <div class="redirectionBox">
            <p>Estamos a realizar algumas verificações de segurança!</p>
            <p>Você será rederecionado automaticamente dentro de momentos para lojadozequinho.pt</p>
          </div>
          <p class="mainTitle">Olá, sabe porque está aqui?</p>
          <p>Você está a ver esta pagina, porque o administrador de lojadozequinho.pt, configurou o seu site para que todos os visitantes, passasem por uma verificação de segurança feita pela NetSafe.</p>
          <p class="mainTitle">Para que serve esta verificação?</p>
          <p>Esta verificação é para evitar que sejam efectuados ataques a pagina, utilizando bots.</p>
          <p class="mainTitle">Como é feita a verificação?</p>
          <p>O processo de verificação obriga o seu computador a resolver um desafio criptografico, também verificamos a reputação do seu IP Publico com uma base de dados.</p>
          <p class="mainTitle">O que acontece após a verificação?</p>
          <p>Após a verificação é criado um token de acesso a pagina que têm uma validade previamente definida pelo administrador da pagina.</p>
        </div>
      </div>
    </div>
    <div class="header">
      <p>O seu ip: 188.80.169.244/2001:8a0:fd51:2200:ac26:9160:cc19:6579 &#8226; O seu netSafe id: 698dc19d489c4e4db73e28a713eab07b &#8226; NetSafe é um serviço da IMM</p>
    </div>
  </div>
</body>

</html>

javascript html5

  • Yeah, it’s that lib.

  • There are the properties async and defer, take a look

  • I just tested them both and I couldn’t!

1 answer

0

you already tried the document.onload?

try the example:

document.onload = () => {
    console.log('carregou')
}

  • There for some reason, it does nothing, nor the console log

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.