Ir para conteúdo

POWERED BY:

Arquivado

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

M4n0w4r

[Resolvido] Loading em Javascript

Por , em Javascript

Recommended Posts

M4n0w4r    0

M4n0w4r
Postado

Oláaaaaaaaaaaaaaaaaa galeraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

 

Seguinte, eu tenho uma função com um loop imenso, então pensei em fazer um loading enquanto o loop não é carregado por completo, no final eu fiz esse exemplo.

<html>
	<head>
		<title>Loading</title>
		
		<meta http-equiv = "content-type" content = "text/html; charset = utf-8" />
		
		<style type="text/css"></style>
		
		<script type="text/javascript">			
			window.onload = function () {
				var height = window.innerHeight;
				var width = window.innerWidth;
				
				var fundo = document.createElement ("div");
				fundo.style.backgroundColor = "black";
				fundo.style.height = height + "px";
				fundo.style.left = "0";
				fundo.style.position = "fixed";
				fundo.style.top = "0";
				fundo.style.width = width + "px";
				
				var borda = 10;
				var padding = 10;
				
				height = height * 0.1;
				width = width * 0.7;
				
				var base = document.createElement ("div");
				base.style.backgroundColor = "black";
				base.style.border = borda + "px solid white"
				base.style.height = height + "px";
				base.style.left = "50%";
				base.style.marginLeft = "-" + ((width / 2) + (borda + padding)) + "px";
				base.style.marginTop = "-" + ((height / 2) + (borda + padding)) + "px";
				base.style.padding = padding + "px";
				base.style.position = "absolute";
				base.style.top = "50%";
				base.style.width = width + "px";
				
				var barra = document.createElement ("div");
				barra.style.height = height + "px";
				
				document.body.appendChild (fundo);
				fundo.appendChild (base);
				base.appendChild (barra);
				
				var acrescenta_loop = 1;
				var comeca_loop = 0;;
				var i;
				var quantidade_loop = 10;
				var resultado = document.getElementById ("resultado");
				var span;
				var width_loop = comeca_loop;
				
				var acrescenta_width = (width * acrescenta_loop) / quantidade_loop;
				
				for (i = comeca_loop; i < quantidade_loop; i = i + acrescenta_loop) {
					width_loop = width_loop + acrescenta_width;
					
					barra.style.backgroundColor = "white";
					barra.style.width = width_loop + "px";
					
					span = document.createElement ("span");
					span.innerHTML = i;
					
					span.appendChild (document.createElement ("br"));
					resultado.appendChild (span);
					
					alert ("Barrinha enchendo e números sendo escritos em segundo plano no documento em tempo real");
				}
				
				document.body.removeChild (fundo);
			}
		</script>
	</head>
	
	<body>
		<div id = "resultado"></div>
	</body>
</html>

Com isso eu tenho 2 problemas:

 

1 - Se tirar o "alert" o navegador vai executar a função tão rápido que você não vai ver nenhum loading, mesmo com o número de repetições maior

 

2 - Se o loop for muito alto obviamente o navegador congela

 

Triste, mesmo tentando com loops maiores para que esse bendito loading apareça sem alert, ou o navegador trava ou o navegador processa tão rápido que não da para ver nada.

 

Agredeço muito quem puder me ajudar, vlwwwwwwwwwwwwwwwwwwwwwwwwwww o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

É bem mais simples que isso...

 

Pra que acabar com o processamento do PC da pessoa???

 

Se ele tiver um Pentium II tá ferrado...

 

Faça isso em 3 passos:

 

  • Crie uma div que sobreponha o conteúdo, de a ela o id de "carregador", por exemplo
  • Adicione uma outra div dentro desta em qualquer posição que preferir
  • No evento onload do javascript faça:
window.onload = function(){
var carregador = document.getElementById("carregador");
carregador.parentNode.removeChild(carregador);
}

Agora você tem seu carregador...

Compartilhar este post

Link para o post
Compartilhar em outros sites

M4n0w4r    0

M4n0w4r
Postado

Obrigado Rick.hjpbarcelos, sua solução resolve meu problema mas esse método não é dinâmico :)

 

Depois de muito pesquisar finalmente encontrei a solução, javascript não é multitarefa ! Meu script por ser apenas uma "thread" ou ficava pronto ou ficava congelado, a solução é dividir essa "thread" enorme em "threads" menores que vão ser processadas ao longo do tempo. Segue abaixo o novo código

 

<!-- FUNCIONA APENAS EM NAVAGADORES QUE SEGUEM OS PADRÕES DA WHATWG -->
<html>
	<head>
		<title>Loading</title>
		
		<meta http-equiv = "content-type" content = "text/html; charset = utf-8" />
		
		<script type="text/javascript">
			function desenha () {
				var height = window.innerHeight;
				var width = window.innerWidth;
				
				var canvas = document.createElement ("canvas");
				canvas.setAttribute ("height", height + "px");
				canvas.setAttribute ("width", width + "px");
				
				canvas.style.background = "black";
				canvas.style.left = "0";
				canvas.style.position = "fixed";
				canvas.style.top = "0";
				
				document.body.appendChild (canvas);
				
				if (canvas.getContext) {
					return canvas;
				}
				else {
					return false;
				}
			}
			
			function loop (canvas, container_loop) {
				// Loop
				var acrescenta_loop = 1, comeca_loop = 0, quantidade_loop = 499;
				var span;
				var width_loop = 0;
				
				// Canvas
				var height_total = canvas.height * 0.1;
				var width_total = canvas.width * 0.7;
				var height_centralizar = (canvas.height - height_total) / 2;
				var width_centralizar = (canvas.width - width_total) / 2;
				
				// Genéricos
				var acrescenta_width = (width_total * acrescenta_loop) / quantidade_loop;
				var ctx = canvas.getContext ("2d");
				var interval;
				var aumenta_borda = 20;
				
				ctx.lineWidth = "10";
				ctx.strokeStyle = "rgba(255, 255, 255, 1)"
				ctx.strokeRect (width_centralizar - aumenta_borda, height_centralizar - aumenta_borda, width_total + (aumenta_borda * 2), height_total + (aumenta_borda * 2));
				
				interval = window.setInterval (function () {
					width_loop = width_loop + acrescenta_width;
					
					ctx.fillStyle = "rgba(255, 255, 255, 1)";
					ctx.fillRect (width_centralizar, height_centralizar, width_loop, height_total)
					
					span = document.createElement ("span");
					span.innerHTML = comeca_loop;
					
					span.appendChild (document.createElement ("br"));
					container_loop.appendChild (span);
					
					if (comeca_loop >= quantidade_loop) {
						clearInterval (interval);
						
						document.body.removeChild (canvas);
					}
					
					comeca_loop = comeca_loop + acrescenta_loop;
				}, 5)
			}
			
			window.onload = function () {
				loop (desenha (), document.getElementById ("resultado"));
			}
		</script>
	</head>
	
	<body>
		<div id = "resultado"></div>
	</body>
</html>

Quem quiser melhorar o código pode ficar a vontade :)

Compartilhar este post

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

Informação importante

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

  Aceito