Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

leonardo-benitez

Jquery - Detectar se a página foi carregada

Por , em Javascript

Recommended Posts

leonardo-benitez    0

leonardo-benitez
Postado

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? 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

KhaosDoctor    242

KhaosDoctor
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

juliocezarjr    0

juliocezarjr
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado
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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

juliocezarjr    0

juliocezarjr
Postado

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:5a2dbcc8b9f37_CapturadeTela2017-12-10as19_58_05.png.814a7f2f4d38f0596c241434f13e7aa5.png

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Omar~    87

Omar~
Postado

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');

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

juliocezarjr    0

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kroliver    1

Kroliver
Postado

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/ 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • ILR master
      Cronômetro regressivo php
      Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Danilo - Jesus voltará!
      Pegar class e id gerado dinamicamente em requisição ajax (javascript) e php
      Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
    • joeythai
      combobox repetindo registros
      Por joeythai
      Boa tarde pessoal,
       
      eu criei uma página da qual tenho diversos checkbox para marcar, se tiver alguma caixinha marcada eu habilito um botão para fazer o envio ao servidor, porém, está acontecendo um problema que não consegui identificar, o que está acontecendo é o seguinte:
       
      Quando eu marco um checkbox apenas, o botão é liberado, eu clico nele e aparece um modal para preencher os dados, e nesse modal tem um combobox com opções criadas em javascript, como tem somente uma caixinha marcada as informações no combobox aparecem perfeitamente, porém, se eu marco 2 checkbox ou mais as opções do combobox se repetem, como se eu tivesse fazendo isso dentro de um looping, o que não é verdade, eis o codigo abaixo:
       
      <code>
        <!DOCTYPE html>    <html lang="en">  
         <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   </head>  
        <body>   <input id="check-belongings" class="custom-control-input check-belongings" name="" type="checkbox" value="">   <label for="" class="custom-control-label"></label>   <div class="col-12">   <div class="md-form mt-0 mb-0 pt-0 pb-0">   <label for="reason">Motivo</label><br><br>  
        <select class="form-control md-select2" style="width: 100%; text-transform: uppercase"   id="reason_all_belongings" name="reason_all_belongings" required>   </select>   </div>   </div>
       
        <script>  
         $('.check-belongings').click(function () {    let belongingsIds = [];    let listaMarcados;  
         let optionsReason = [];   let option = null;  
        let movementsSelect = document.getElementById("reason_all_belongings");  
        optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr','  Inspeção', 'Manobra', 'Venda'  ];  
        optionsReason.forEach((reason) => {   option = new Option(reason, reason.toLowerCase());   movementsSelect.options[movementsSelect.options.length] = option;   });  
        listaMarcados = document.getElementsByClassName("check-belongings");   for (let loop = 0; loop < listaMarcados.length; loop++) {   var item = listaMarcados[loop];  
         if (item.type == "checkbox" && item.checked) {    $('.drop-all-belongings').removeAttr('disabled');    belongingsIds.push(item.value);    } else { // $('.drop-all-belongings').attr('disabled', 'disabled');   }   }   });   </script>   </body>  
        </html> </code>
    • Alessandro Bodão
      Transitar de uma página pra outra sem carregamento
      Por Alessandro Bodão
      Boa noite irmandade!
       
      Ando reparando de alguns anos pra cá, uma forte tendência em que sites bem dinâmicos e interativos transitam de uma página pra outra sem que a outra página se quer passe por um processo de carregamento, você clica, simplesmente acontece algumas transições nos elementos da página, e de repente, você está em outra página, outro url. De forma suave, nada é carregado, apenas algo acontece e você já está em outra página.
       
      Gostaria de saber como isso é feito pra aplicar em um site que estou desenvolvendo, se é algum framework, alguma ferramenta além do JavaScript...
       
      Trouxe um belo exemplo: https://www.traffic.productions/
       
      Se você chegou até aqui, agradeço desde já!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito