Cargar un gif de Loading mientras carga una imagen

nitsuga1986 · #1 (**permalink**) 10/06/2012, 03:53

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!

aldo1982 · #2 (**permalink**) 10/06/2012, 15:48

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>

nitsuga1986 · #3 (**permalink**) 11/06/2012, 03:20

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

Muchas gracias!!! :D