Jump to content
leonardo-benitez

Jquery - Detectar se a página foi carregada

Recommended Posts

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? 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.

  • +1 1

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

 

  • +1 1

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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/ 

 

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
    • By Infra Comnet
      Estou reaprendendo o javascript desde que entrei no novo trabalho, então estou criando um projetinho simples em html com javascript dentro do html, aí ok. Googleando umas coisas que preciso para associar aos poucos no meu projetinho, encontrei através do site CodePen.io um esboço feito por alguém, daí nele continha a função era o que eu precisava (preencher os campos que automaticamente puxa para o textarea, além de substituir as palavras) , daí peguei as funções e botei no meu código-fonte de html, mas não funcionou em qualquer navegador e achei estranho. acrescentei a linha de script que chama o tal jquery do esboço de onde encontrei, testei e nada. Daí criei meu usuário no CodePen.io, joguei os códigos nele, testei e funcionou... aí achei estranho se funciona no CodePen.io e não funciona nos navegadores.
      Então vou explicar o que acontece: Pelo CodePen.io (acesse neste link com os códigos que fiz: https://codepen.io/InfraComnet/pen/JQbrMV ), o campo Código quando digitado (que será substituído por select para selecionar em vez de digitar números) está puxando conteúdo para a textarea e está ok, e os campos nome e técnico digitados estão substituindo normal. Agora nos navegadores, mesmo digitando nos campos, nada aparece no textarea.
      Um detalhe: como falei antes que estou reaprendendo o javascript, então o jquery é uma coisa nova para mim (não conheço quase nada de jquery, por isso que cacei as funções prontas e pede o src de jquery para funcionar, daí é tenso), então para que as coisas funcionem, eu botei a linha de comando da script de jquery para que possa executar as tarefas funcionando igual ao que acontece no CodePen.io, mas não tá funcionando. Já o outro projetinho que montei, tb usa o jquery (mas diferente deste) e está funcionando. Não sei onde está o erro. E outra, estou usando o Notepad++ pra mim trabalhar nos códigos de html, css e, aos poucos, javascript.
      Veja o código completo abaixo:
      <html> <head><title>SCRIPT COLETA DE INFORMAÇÕES - TESTE</title></head> <!-- Script com link de JQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> var dados = [{"codigo": "1", "Nome": ["AVISO PADRÃO / XXXXXX / XXXXXXXX) NÃO CADASTRADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) AUTORIZA CADASTRADO"]},              {"codigo": "2", "Nome": ["LEMBRETE / XXXXXX / XXXXXXXX) AGENDADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) VERIFICAR ORDEM DE SERVIÇO"]},              {"codigo": "3", "Nome": ["REINCIDÊNCIA / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) PROBLEMA REINCIDENTE"]},              {"codigo": "4", "Nome": ["REAGENDAMENTO / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) FEITO NOVO AGENDAMENTO"]},             ]; $('input[name="codigo"]').change(function(){   $('textarea[name="nome pessoal"]').val(pegaNome($(this).val())); }); $('input[name="nome"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',` ${nome} `)); }); $('input[name="tecnico"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX',` ${nome} `)); }); function pegaNome(cod){   var nome  = "Não existe na lista"   var nomes = "";      $.each(dados, function(i, val){     if (val.codigo == cod)       {         nome = val.Nome;         $.each(nome, function(index, value){           nomes += value + '\n\n';         });         }     });   return nomes; } String.prototype.replaceAll = function(searchStr, replaceStr) {     var str = this;     searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');     return str.replace(new RegExp(searchStr, 'gi'), replaceStr); }; </script> <body> <!-- Exibindo na página nos navegadores --> <tr>   <td>     Código:<input type="text" name="codigo" size="5">     Cliente: <input type="text" name="nome" size="28"></td></br>     Técnico: <input type="text" name="tecnico" size="28"></br></br>     <textarea name="nome pessoal" rows="10" cols="50"></textarea>   </td> </tr> </body> </html>  
    • By manoaj
      Boa tarde pessoal!
      Tenho As seguintes tabelas no meu banco:
       
      Tabela->clientes(Essa tabela guarda os clientes)
      Tabela-> Produtos (Essa tabela guarda os  produtos)
      Tabela -> Tamanhos (Essa tabela guarda os tamanhos e os preços)
      Tabela->Relação de tamanho (Essa tabela guarda a relação dos tamanhos que cada produto pode ter)
      Tabela-> Pedidos (Essa tabela guarda o pedido do cliente com tamanho e quantidade)
       
      E o problema e o seguinte: Como q eu faço uma seleção nessas tabelas para saber o valor total do pedido do meu cliente com base no tamanho e quantidade escolhida?
    • By Artes Ussler
      Olá
       
      Alguém já usou o modal deste link: 
       
      https://jquerymodal.com/
       
      e alterou ele para abrir um modal ao acessar a página, e não ao clicar em um link?
       
      Caso alguém tenha feito e puder me mostrar como faz, fico grato.
       
    • By Lincoln Ferreira
      Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.
      http://www.jquery-steps.com/Examples
       
      if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.