0

Alguém sabe como faço para quando eu apertar em um link eu ser direcionado primeiro à uma tela de load e apos um certo tempo (coisa de segundos) eu ser direcionado à pagina que realmente eu gostaria de ir? Resumindo: a pagina de load funcionaria como um "interventor" entre o Link e a pagina-alvo.

3 Respostas 3

1

Existe uma técnica antiga, sem JS ou jQuery, basta usar a Meta Refresh

Coloque essa tag dentro do <head> da página onde vai estar o loader

<meta http-equiv="refresh" content="2; pagina-de-destino.html">

Repare que esse número 2; são os segundos que vc vai permanecer na página do loader antes dela te direcionar para a página a pagina de destino.

Então a sua estrutura ficaria assim:

Primeira página com link para href="pagina-loadre.html" > pagina-loader.html com a meta http-equiv="refresh" > página de destino.html

inserir a descrição da imagem aqui

0

Fala Gabriel, seja bem-vindo ao Stackoverflow.

Existe duas formas de você alcançar o que precisa - uma fácil e outra que requer mais código para ser desenvolvida.

A forma mais fácil basta você utilizar a função scope.setTimeout(function[, delay]). Basicamente ela irá executar o código dentro da função apenas depois do tempo em milissegundos configurado no parâmetro delay.

Dentro da função basta você redirecionar o usuário para a página desejada. E antes da função, basta você exibir algum loader (existe várias bibliotecas simples e pequenas que fazem isso).

loader.display = "block";

window.setTimeout(() => {
   window.location = "https://example.com";
}, 3600);

A segunda maneira (que requer mais habilidades) você terá que interceptar de qual página o usuário foi redirecionado para essa página de loading (pode ser através de parâmetros GET, cookies, sessions, etc) e utilizar a mesma função que citei acima scope.setTimeout(function[, delay]) para redirecionar o usuário depois de X tempo para a página desejada.

0

Você pode fazer isso usando JavaScript. Basta usar um setTimeout na tela de loading para esperar o tempo antes de redirecionar e window.location para fazer o redirecionamento.

Segue um exemplo:

window.onload = function(){
  //Tempo que deseja esperar, em milissegundos
  var tempo = 5000;
  //Url para onde redirecionar
  var url = "https://pt.stackoverflow.com"

  setTimeout(function(){
    window.location = url;
  }, tempo);
}
<h1>Tela de Load</h1>

Você pode passar o link para a tela de loading como parâmetro na url. Você consegue acessar a url da página usando window.location.href e o parâmetro da seguinte forma:

var url_string = "http://load.html?url=https://pt.stackoverflow.com" ; //window.location.href
var url = new URL(url_string);
var link = url.searchParams.get("url");
console.log(link);

Se a url para onde deseja direciona possuir parâmetros gets, veja a seguir como tratar.

Na página que chama o load você precisa passar a url para onde ele vai redirecionar usando encodeURIComponent. Lembre-se de dar um decodeURIComponent(url) na url recebida dentro do load.

Segue o exemplo:

function redirect(url) {
  var urlEncoded = encodeURIComponent(url);
  var redirectUrl = "load.html?link="+ urlEncoded;
  
  console.log(redirectUrl);
  //window.location = redirectUrl;
}
<a href="#" onclick="redirect('www.foobar.com/?first=1&second=12&third=5')"> redirect to loading page </a>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .