Que no desaparezca el gif hasta cargar todas las imágenes

[Luisa29]

Hola amigos, resulta que tengo este código:

Código:

var disc = function(div,of){
	$(div).html("<img src='loading.gif' id='load'>");
	var ajax = $.ajax({url : of, type : "GET"});
	ajax
		.done(function(response){
			Commons.socialDone(div, response);
			FB.XFBML.parse(document.getElementById('comentarios'));
   twttr.widgets.load();
		})
		.fail(function(){
			Commons.socialFail(div);
		});
}

Commons = {
    socialDone : function (div, response) {
		$(div)
			.hide()
			.html(response)
			.fadeIn('slow');
	},

    socialFail : function (div) {
		$(div)
			.hide()
			.html("<p>error</p>")
			.fadeIn('slow');
		
	}
}

Que antes de cargar el div muestra un gif animado. Pues bien, el gif animado desaparece y en el div aún no se han cargado las imágenes, y aparecen cargándose. Me gustaría que el gif permaneciese hasta que estuviese todo cargado, imágenes, texto, código... ¿Cómo podría modificarlo para que así sucediese? Gracias.

[man0l0]

Hola Luisa,

El gif que tienes ahí es válido sólo para el llamado por ajax, por eso desaparece una vez que reemplazas el contenido del div en socialDone.

Para mantenerlo activo, deberías gatillar un "listener" que espere la carga de las imágenes, no lo he probado pero debería ser algo similar a esto:

Código:

    socialDone : function (div, response) {
                $('body').append('<div id="precarga" style="display: none;"></div>');
                $('#precarga').html(response);
                $('#precarga img').on('load', function(){
                     $(div).hide().html($('#precarga').html()).fadeIn('slow');
                     $('#precarga').remove();
                });
	},

[Luisa29]

Iniciado por man0l0

Hola Luisa,

El gif que tienes ahí es válido sólo para el llamado por ajax, por eso desaparece una vez que reemplazas el contenido del div en socialDone.

Para mantenerlo activo, deberías gatillar un "listener" que espere la carga de las imágenes, no lo he probado pero debería ser algo similar a esto:

Código:

    socialDone : function (div, response) {
                $('body').append('<div id="precarga" style="display: none;"></div>');
                $('#precarga').html(response);
                $('#precarga img').on('load', function(){
                     $(div).hide().html($('#precarga').html()).fadeIn('slow');
                     $('#precarga').remove();
                });
	},

¿Y cómo podría aplicarlo al código de mi web? ¿podrías mostrarme un ejemplo?

EDITO: He intentado implementarlo pero no me sale, ¿dónde pongo el div preload? ¿dónde pongo el código? ¿en la parte de socialdone?

[man0l0]

Iniciado por Luisa29

¿Y cómo podría aplicarlo al código de mi web? ¿podrías mostrarme un ejemplo?

EDITO: He intentado implementarlo pero no me sale, ¿dónde pongo el div preload? ¿dónde pongo el código? ¿en la parte de socialdone?

Hola, claro, te puse todo el reemplazo al socialDone: {...},

No deberías hacer nada más que ponerlo ahí.

Slds!

[Luisa29]

Iniciado por man0l0

Hola, claro, te puse todo el reemplazo al socialDone: {...},

No deberías hacer nada más que ponerlo ahí.

Slds!

No me funciona, creo que habría que hacer algo más, ¿Esto lo quito directamente?

Código:

	$(div).html("<img src='loading.gif' id='load'>");

Y donde exactamente abro el div con el gif dentro, ¿encima del div que carga el contenido? ¿dentro del div que carga el contenido? ¿dentro del mismo contenido que es cargado? Perdona mi ignorancia.

[man0l0]

Hola Luisa, espero que en el futuro puedas estudiar algo de javascript (sin ánimo de ofender), entendiendo que este pueda ser un caso puntual, así quedaría tu código completo:

Código:

var disc = function(div,of){
	$(div).html("<img src='loading.gif' id='load'>");
	var ajax = $.ajax({url : of, type : "GET"});
	ajax
		.done(function(response){
			Commons.socialDone(div, response);
			FB.XFBML.parse(document.getElementById('comentarios'));
   twttr.widgets.load();
		})
		.fail(function(){
			Commons.socialFail(div);
		});
}

Commons = {
  socialDone : function (div, response) {
                $('body').append('<div id="precarga" style="display: none;"></div>');
                $('#precarga').html(response);
                $('#precarga img').on('load', function(){
                     $(div).hide().html($('#precarga').html()).fadeIn('slow');
                     $('#precarga').remove();
                });
	},

    socialFail : function (div) {
		$(div)
			.hide()
			.html("<p>error</p>")
			.fadeIn('slow');
		
	}
}