Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Cargar un gif de Loading mientras carga una imagen

Estas en el tema de Cargar un gif de Loading mientras carga una imagen en el foro de Frameworks JS en Foros del Web. Buenas, tengo un fallo al cargar un gif de loading hasta que cargue unas cuantas imagenes, el caso es que lo he conseguido, pero si ...
  #1 (permalink)  
Antiguo 10/06/2012, 03:53
 
Fecha de Ingreso: octubre-2008
Mensajes: 91
Antigüedad: 15 años, 5 meses
Puntos: 0
Cargar un gif de Loading mientras carga una imagen

Buenas, tengo un fallo al cargar un gif de loading hasta que cargue unas cuantas imagenes, el caso es que lo he conseguido, pero si cargo otras imagenes en la misma pagina por ajax, el evento de jquery deja de funcionar, he observado que existe un metodo de jquery (LIVE) para aplicarlo sobre contenido que no estaba creado en la web originalmente, pero sigue sin funcionar, este es mi codigo:
Código HTML:
<div id="contenido_imagenes">
	<?php
	while($res = mysql_fetch_array($rs)){
	?>
	<div id="imagen_<?php echo $res['id'];?>" class="imagen-galeria">
		<script>
			$(document).ready(function() {
			        $("#load-<?php echo $res['id'];?>").show();
				$("#foto-<?php echo $res['id'];?>").load(function() {
				    $("#load-<?php echo $res['id'];?>").hide();
			        })
		        });
		</script>
		<div class="loading" id="load-<?php echo $res['id'];?>"></div>
		<img class="images-general" id="foto-<?php echo $res['id'];?>" src="uploads/<?php echo $res['url'];?>"/>
							
	</div> 
Ese codigo funciona, cuando carga la imagen, oculta el gif, pero si por ejemplo mediante ajax, cargo mas imagenes, ya no funciona, para cargar las imagenes utilizo esto:
Código:
function cargarMas(){
       $.ajax({		
	        url:   'ajax/cargar_fotos.php',
		type:  'post',
		beforeSend: function () {
			$("#resultado_loading_fotos").css({'display':'block'});
		},
		success:  function (response) {
			$("#resultado_loading_fotos").css({'display':'none'});
			$("#resultado_fotos").prepend (respose);
		}
		});
	}
Con ese codigo hago que salga un LOADING general, pero yo lo que quiero es que como en el codigo de arriba, salga un pequeño loading por foto.


Un saludo!
  #2 (permalink)  
Antiguo 10/06/2012, 15:48
Avatar de aldo1982  
Fecha de Ingreso: noviembre-2004
Ubicación: Santa Fe (Argentina) Colon F.C
Mensajes: 1.362
Antigüedad: 19 años, 3 meses
Puntos: 6
De acuerdo Respuesta: Cargar un gif de Loading mientras carga una imagen

en el <head>

Código HTML:
<script>
	$(document).ready(function(){
		$("preload_img").each(function(){
				$(this).hide();
				$(this).load(function(){
					$(this).width($(this).parent().width()).height($(this).parent().height());
					$(this).fadeIn("slow");
				});
		});		
	});
	</script>

<style type="text/css">
	.div {
		background-image:url('images/loading.gif');
		background-repeat:no-repeat; background-position:center center;        
	}
	.div img   {width:inherit; height:inherit;}	
	</style> 

en el <body>

Código HTML:
<div> <img class="preload_img" src="tuImagen.jpg"> </div> 
__________________
LA MUERTE ESTÁ TAN SEGURA DE VENCER QUE NOS DA TODA UNA VIDA DE VENTAJA
  #3 (permalink)  
Antiguo 11/06/2012, 03:20
 
Fecha de Ingreso: octubre-2008
Mensajes: 91
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Cargar un gif de Loading mientras carga una imagen

@aldo1982 perfecto!! he tenido que hacer unos simples retoques y funciona!!

Muchas gracias!!! :D

Etiquetas: ajax, funcion, gif, jquery, loading, mientras, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:16.