Ir para conteúdo

Arquivado

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

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? 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

 

Compartilhar este post


Link para o post
Compartilhar em outros 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');

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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/ 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • 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?
    • 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?
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
    • 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
×

Informação importante

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