Problema visualizzazione immagine dentro div

[eithel]

Ciao a tutti!

Volevo chiedevi un aiuto per un problema che mi è capitato testando un sito che sto facendo con il browser internet explorer (sia 7 che 8), mentre con Firefox e Chrome/Safari tutto è ok
Il problema è questo: ho delle immagini nella pagina, quando un utente clicca l'immagine, la pagina si oscura portando in "risalto" l'immagine e due link, che servono per scorrere il resto delle immagini. Mentre l'immagine sta caricando, viene fatta vedere una immagini di "loading".

ora i div su cui lavoro sono (in gerarchia):

<div id="finestra">
    <div id ="immagine">
        <div id="loading"></div>
        <div id="imgs">
            <div id="immaginebox"></div>
        </div>
    </div>
</div>

le funzioni javascript che genera i diversi div è la seguetne:

function layout(){
    .
    .
    .
    var fin=document.getElementById("finestra");

    var imm=document.createElement("div");
    imm.setAttribute("id", "immagine");
    imm.setAttribute("align", "center");


    // creo il div loading
    var loaddiv=document.createElement("div");
    loaddiv.setAttribute("id", "loading");
    // aggiungo l'immagine animata dentro loading
    var load=document.createElement("img");
    load.setAttribute("src", "loadingCircle.gif");

    loaddiv.appendChild(load);
    // aggiungo il div loadinf a il div immagine
    imm.appendChild(loaddiv);


    // creo il div imgs
    var imgdiv=document.createElement("div");
    imgdiv.setAttribute("id", "imgs");
    imgdiv.style.display="none";
    // aggiungo il div imgs a il div immagine
    imm.appendChild(imgdiv);

    
    fin.appendChild(chiudi);
    fin.appendChild(imm);
}

fatta la creazione, faccio una richiesta al server (con la tecnica Ajax), per conoscere il percorso dell'immagine.
Quando ho il percorso dell'immagine mostro l'immagine utilizzando queste due funzioni :

function caricaImmagine(){

    var im=document.getElementById("imgs");

    
    var img=document.createElement("img");
    
    img.setAttribute("id", "immaginebox");
    img.setAttribute("src", vettore3l[1]);  // vettore3l[1] contiene il percorso dell'immagine
    img.onload=function(){img_rid("immaginebox", "600", "600")};
		
    im.appendChild(img);
}

function img_rid(id, largh, alt) {

    //ricavo la larghezza e altezza originali
    var largh_or = document.getElementById(id).width;
    var alt_or = document.getElementById(id).height;

    // se è orrizontale o quadrata
    if(largh_or >= alt_or) {
        var alt_new = alt * alt_or / largh_or;
        document.getElementById(id).width = largh;
        document.getElementById(id).height = alt_new;
    }

    // se è verticale
    else if(alt_or > largh_or) {
        largh_new = largh_or * alt / alt_or;
        document.getElementById(id).width = largh_new;
        document.getElementById(id).height = alt;
    }

    // tolgo l'immagine di loading e faccio vedere l'immagine caricata

    l=document.getElementById("loading");
    l.style.display="none";
    
    
    i=document.getElementById("imgs");
    i.style.display="block";
    //alert("mostro immagine");
}

la seconda funzione mi ridimensiona l'immagine entro certe misure e poi nasconde l'immagine di loading per mostrare l'immagine vera e propria...

Qualcuno può aiutarmi a capire perché internet explorer mi fa vedere l'immagine di loading, poi la toglie ma non mostra l'immagine vera e propria ?

[cavicchiandrea]

Potrebbe essere il percorso sbagliato dell'immagine, comunque inserisci degli alert nei vati step per vedere cosa riportano, e forse è il caso di postare un link ad una pagina pubblica per farei dei test.

[eithel]

il percorso è corretto (dato che funziona su altri browser) e mettendo gli allert internet explorer arriva fino al punto di caricare l'immagine ma non lo fa!

Comunque ho caricato la pagina in questione così puoi testarla: LINK

[eithel]

ok trovato l'inghippo...

dato questo

img.setAttribute("id", "immaginebox");
img.setAttribute("src", vettore3l[1]);  // vettore3l[1] contiene il percorso dell'immagine
img.onload=function(){img_rid("immaginebox", "600", "600")};
im.appendChild(img);

facendo un po di debug con degli alert, ho notato che internet explorer chiama subito la funzione "img_rid()" prima ancora di "appendere" il div. Questo comporta che la funzione img_rid() dove al suo interno è presente l'istruzione

document.getElementById(id)

con id = "immaginebox non trovi l'elemento.

per ovviare al problema ho spostato la riga di codice che indica il percorso dell'immagine dopo aver "appeso" il div...

img.setAttribute("id", "immaginebox");

img.onload=function(){img_rid("immaginebox", "600", "600")};
im.appendChild(img);

img.setAttribute("src", vettore3l[1]);  // vettore3l[1] contiene il percorso dell'immagine

Problema RISOLTO!!