Como carregar imagens grandes com AJAX e mostrar uma mensagem de carregamento na capa

  • Autor Autor luisgzafra
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
luisgzafra

luisgzafra

Gamma
Programador
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Buenas, estoy con la portada de Enlace eliminado

Si se fijan, click derecho>siguiente imágen, carga una imagen de fondo, pero tarda en cargar por que son grandes.

Me gustaría poder mostrar un mensaje mientras que se carga, ¿Se puede cargar por AJAX? ¿Cómo se cargan imágenes por AJAX?
Así podría ver el estado de carga (readystate)

Saludos!
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Vos ya sabes de antemano cual es la imagen que se carga cuando le das a "siguiente fondo" ??

Si lo sabes de antemano podes precargar la siguiente imagen mediante javascript (no es un request ajax esto, es cargar la imagen).

El codigo seria algo asi:

pic = new Image(360, 90); //360 = ancho, 90 = alto de la imagen
pic.src = "/images/tipbk2.png"; //url de la siguiente imagen.

Luego cuando le den a siguente simplemente pones la imagen tal cual como lo estas haciendo, solo que el navegador ya la tendra cacheada porque lo forzo por javascript. En ese momento debes precargar nuevamente la siguiente imagen mediante el mismo metodo.
 
La intención es que cuando de a siguiente imagen, empiece la carga de esa, pero mientras se carga pueda mostrar un mensaje 🙂
 
La solucion que yo te digo, hace que cuando le de siguiente, la imagen se muestre instantaneamente.
 
Pero si le da 2 veces seguida, ocurre que no se muestra la imagen ni ningún mensaje de que se está cargando, esto es lo que intento evitar 🙂
 
Inserir CODE, HTML ou PHP:
var preLoad={
	Lst:new Array(),
	va:-1,
	fnc:null,
	id:null,
	Cargar:function(){
		try{
		var i=new Image();
		i.onload=preLoad.CargarSgte;
		i.onerror==preLoad.CargarSgte;
		i.src=preLoad.Lst[preLoad.va];
		}catch(e){alert(e.description);}
	},
	Mostrar:function(){
		try{			
			var o=document.getElementById(preLoad.id);
			var a=preLoad.va+1;
			var s=preLoad.Lst.length;
			var p=parseInt(((a/s)*100));
			o.innerHTML=p.toString()+"%";
		}catch(e){alert(e.description);}
	},
	CargarSgte:function(){
		try{
			preLoad.Mostrar();		
			preLoad.va++;
			if(preLoad.Lst.length>preLoad.va){			
				setTimeout(preLoad.Cargar,0);			
			}else if(preLoad.Lst.length==preLoad.va)
				preLoad.fnc();
		}catch(e){alert(e.description);}
	},
	Iniciar:function(a,i,f){
		try{
			if(a instanceof Array);else a=new Array();
			i=i||"";
			preLoad.Lst=a;
			preLoad.fnc=f;
			preLoad.id=i;
			preLoad.CargarSgte();
		}catch(e){alert(e.description);}
	}
}

var Son=new Array	(
						"img/01.jpg",
						"img/02.jpg",
						"img/03.jpg",
						"img/04.jpg",
						"img/05.jpg",
						"img/06.jpg",
						"img/07.jpg",
						"img/08.jpg",
						"img/09.jpg",
						"img/10.jpg",
						"img/11.jpg",
						"img/12.jpg",
						"img/13.jpg",
						"img/14.jpg",
						"img/15.jpg",
						"img/16.jpg",
						"img/17.jpg",
						"img/18.jpg",
						"img/19.jpg",
						"img/20.jpg",
						"img/21.jpg"						
					);

var Inicia=false;
try{
	preLoad.Iniciar(Son,"Texto",function(){
		Inicia=true;
                alert("Termino la carga.");
	});
}catch(e){alert(e.description);}

Lo tengo puesto en una pagina y me funciona.
Espero te pueda servir 🙂
 
Voy a intentarlo con ese código 🙂
 
Creo que la mejor forma que podes hacer es cargar las imagenes cuando el usuario pide cambiar el fondo como decis originalmente.

El problema que podes tener por cargar todas las imagenes al cargar la página es que el sitio va a tardar bastante tiempo en estar listo, por más que el usuario ya lo pueda usar ... y eso te va a hacer penalizar en SEO me parece, tengo entendido que a google le gustan los sitios que cargan rápido.

Lo ideal sería que cuando el usuario cambie el fondo, crees el objeto img y uses los eventos por javascript para detectar cuando este listo y mientras mostras una animación del tipo "loading". Si estas usando jquery a lo mejor ya existe un plugin que te permita hacer lo que queres.

Saludos
 
estoy de acuerdo con el codigo que te pasaron pero investiga tambien lazyload de imagenes en google para
profundizar sobre el tema.
 
Voltar
Topo