Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite,
Preciso de um ícone/animação/texto/qualquer-coisa que me indique que algum elemento da página ainda está sendo carregado.
Tentei usar "$(window).load" e outros recursos semelhantes, mas o problema é que eu troco troco as imagens da página toda vez que o usuário clica em um botão, algo como isso:
<head> <title> Página zuada </title> </head>
<body>
<img id="imagem" src="imagem1.jpg" />
<button onclick="troca-imagem('imagem');"></button>
<script>
troca-imagem = function(img){
document.getElementById(img).src = 'imagem2.jpg';
}
</script>
Na primeira vez que a página carrega consigo implementar uma animação de loading, porém preciso que ela apareça sempre que qualquer elemento está carregando, pois as imagens que eu vou trocando são pesadas.
Por favor, alguém pode fornecer alguma luz?Obrigado, consegui solucionar o problema pelo método apresentado!!
Fala galera,
To estudando jQuery e me deparei com esse problema:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meu Curso de jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("DOM carregado!!!");
});
$(window).load(function(){
alert("Elementos carregados!!!");
});
</script>
</head>
<body>
<h1>Helo world!</h1>
</body>
</html>
Acontece que minha página carrega o alert do carregamento do document mas não carrega o alert do window.
Alguém pra me dizer onde estou errando?>
Em 10/08/2017 at 14:06, leonardo-benitez disse:
Obrigado, consegui solucionar o problema pelo método apresentado!!
Você pode fazer assim:
Spoiler
/*
* Params
* img_load : imagem que é para ser carregada
* img_troca : ID ou class do elemento IMG que é para trocar
*/
function loadImage(img_load, img_troca) {
var $img_troca = img_troca;
var loading = new Image();
loading.src = "loading.gif"; // Isso vai ser a imagem loading coloque da forma que desejar
$.ajax({
beforeSend: function () {
// Isso vai colocar a imagem de animação no local e permanecerá até que a imagem seja carregada
$img_troca.attr('src', loading.src);
},
success: function () {
// Nesse momento substitui a imagem loading pela imagem que foi carregada
var image = new Image();
image.src = img_load + "?rand=" + Math.random(); // Atribuir um texto aleatório a imagem para previnir erro de cache
$img_troca.attr('src', image.src);
}
});
}
Obs.: Não testei e como você colocou no título que é com jQuery essa é uma forma de fazer.>
3 horas atrás, juliocezarjr disse:
Fala galera,
To estudando jQuery e me deparei com esse problema:
Acontece que minha página carrega o alert do carregamento do document mas não carrega o alert do window.
Alguém pra me dizer onde estou errando?
Deixe-me explicar da forma mais simples o possível.
Em javascript quando queremos manipular o DOM devemos executar os scripts somente depois que o próprio é carregado. A forma mais comum de se fazer isso é adicionar todos scripts no final do body.
No básico quando se sua a jquery "QUE NÃO É JAVASCRIPT" ao se utilizar $(document).ready() Você pausa o script e ele só é executado no final do carregamento do DOM e window.load é um método nativo do javascript que executa assim que a página é aberta e não espera o carregamento do DOM.
Obrigado pela resposta.
Eu entendo que o (document).ready refere-se ao dom e, por exemplo, não espera uma foto carregar.
Quanto ao (window).load, entendo que ele espera a página carregar, por tanto, os elementos da página, como por exemplo uma foto.
Está correto esse raciocínio?
Teoricamente compreendo a diferença entre os 2. O que não estou compreendendo é porque o (window).load não está funcionando (no exemplo que apresentei).
A propósito, o console apresenta a seguinte imagem quando carrego a página:/monthly_2017_12/5a2dbcc8b9f37_CapturadeTela2017-12-10as19_58_05.png.814a7f2f4d38f0596c241434f13e7aa5.png" />
Não posso entrar em detalhes sobre jQuery apesar de saber utilizar muitos recursos, sou leigo a termos técnicos dessa biblioteca js. Mas numa coisa posso dizer que esse erro aí é por falta de parâmetro.
Até onde eu sei a função load em jQuery pertence aos seus métodos AJAX e só pode ser usado para esse fim ("me corrijam se estiver errado")
$('.div_load').load('carregar.html');
>
11 hours ago, Omar~ said:
Não posso entrar em detalhes sobre jQuery apesar de saber utilizar muitos recursos, sou leigo a termos técnicos dessa biblioteca js. Mas numa coisa posso dizer que esse erro aí é por falta de parâmetro.
Até onde eu sei a função load em jQuery pertence aos seus métodos AJAX e só pode ser usado para esse fim ("me corrijam se estiver errado")
$('.div_load').load('carregar.html');
Está certo. Ainda não resolvi meu problema mas agradeço sua atenção.Amigo tente isto para após o documento ser carregado:
$(document).ready(funtion(){
//Código aqui;
});
E use este para quando a janela ser totalmente carregada:
window.onload = function(){
//Código aqui;
}
Isso é Jquery, espero ter ajudado.>
Citar
Documentação: http://api.jquery.com/
Os elementos de imagem tem um evento Load como você pode ver aqui e com um exemplo mais pertinente aqui.
Por padrão uma imagem é carregada via requisições externas de qualquer forma, veja um exemplo neste artigo