Reparar/adaptar código jQuery para IE

[Facundo72]

Gracias a la muy generosa aportación de Mayid (gracias de nuevo) conseguí este código para una página con varias galerías de imágenes. [URL="http://www.forosdelweb.com/f127/variable-para-atributo-id-seleccionado-824866"]Ésta es la historia.[/URL]

Aquí el código:

Código:

$(document).ready(function(){
    $('div.espacios a').click(function (evt) {
        evt.preventDefault();
        
        var largePath = $(this).attr("href");
        var largeAlt = $(this).attr("title");
        
        escenario = $(this).siblings("div.escenario");
        loader = escenario.children("div.loader");
        
        loader.fadeIn("slow", function() {
        
        laImagen = escenario.children("img");
        
        laImagen.attr({ src: largePath, alt: largeAlt }).load(function() {
        loader.fadeOut("slow");
        });
    });
});

El problema es que con IE (de la versión 7 en adelante) en el primer 'click' para cambiar la imagen, se queda el div con el gif animado (loader): no hace fadeOut. Repito que sólo sucede con Internet Explorer y es sólo en el primer 'click'.

Recibid un cordial saludo.

[Facundo72]

Hola, ¿nadie conoce qué problema puede presentar este código para el motor javascript de Internet Explorer?

Gracias de antemano.

[kokoou]

Código Javascript:

var escenario = $(this).siblings("div.escenario");
var loader = escenario.children("div.loader");
 
var laImagen = escenario.children("img");
 

fijate, inicializando las variables así, esto siempre me trae problemas con IE.

[Facundo72]

Gracias, pero no resuelve el problema. La única manera que he encontrado para que funcione casi perfecto en IE, es siendo menos específico con el loader:

Código:

loader = $("div.loader");

Aunque ahora, obviamente, aparecen todos los .loader.

Lo que no sé es por qué se produce ese error en IE. Parece que esta línea es la clave:

Código:

var loader = escenario.children("div.loader");

Un saludo

[kokoou]

en vez de utilizar

Código Javascript:

var escenario = $(this).siblings("div.escenario");
var loader = escenario.children("div.loader");
 

Utiliza:

Código Javascript:

var loader = $('.escenario .loader');
 

[Facundo72]

Gracias por el feedback, Kokoou. Lo que propones es, a todos los efectos, lo mismo que:

Código:

var loader = $("div.loader");

El problema es que hay varias galerías en la misma página, es decir, varios div.espacios que contienen el correspondiente .escenario. De modo que de esta manera que planteas, van a aparecer todos los div.loader de todos los .escenario al hacer click. La idea es que sólo aparezca el .loader que corresponde al .espacio en que hacemos click, de ahí:

Código:

var escenario = $(this).siblings("div.escenario");

La clave está en siblings como me explicó Mayid en el post original (que no consigo enlazar con el wysiwyg del foro) --> http://www.forosdelweb.com/f127/variable-para-atributo-id-seleccionado-824866

De hecho de este modo

Código:

var loader = $('.escenario .loader');

se produce un error recursivo (según la web developer tool).

A falta de mejor solución, lo que voy a hacer es quitar el gif animado de fondo del div.loader sólo para IE.


Recibe un cordial saludo.