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
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
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.
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>