innerHTML fa sì che IE6 blocchi (permanentemente)

Question

Su un sito su cui sto lavorando Carica una serie di immagini che possono essere animate utilizzando alcuni controlli implementati w/javascript. Tutto funziona perfettamente in tutti i browser, ma IE6 si blocca e non recupera mai; almeno non w/nel 15min lo lascio stare lì.

La parte su cui si sta soffocando è una parte in cui si tenta di modificare il contenuto di un particolare div.

Prima problema:

<div id='animation_image'></div> 

Dopo problema:

<div id="animation_image"> 
    <div id="daily_loop_image_13" class="loop_image"> 
    <img name="animation" src="/path/to/image/13/20100119/world_14.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_12" class="loop_image"> 
    <img name="animation" src="/path/to/image/12/20100119/world_13.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_11" class="loop_image"> 
    <img name="animation" src="/path/to/image/11/20100119/world_12.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_10" class="loop_image"> 
    <img name="animation" src="/path/to/image/10/20100119/world_11.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_9" class="loop_image"> 
    <img name="animation" src="/path/to/image/9/20100119/world_10.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_8" class="loop_image"> 
    <img name="animation" src="/path/to/image/8/20100119/world_9.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_7" class="loop_image"> 
    <img name="animation" src="/path/to/image/7/20100119/world_8.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_6" class="loop_image"> 
    <img name="animation" src="/path/to/image/6/20100119/world_7.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_5" class="loop_image"> 
    <img name="animation" src="/path/to/image/5/20100119/world_6.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_4" class="loop_image"> 
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_3" class="loop_image"> 
    <img name="animation" src="/path/to/image/3/20100119/world_4.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_2" class="loop_image"> 
    <img name="animation" src="/path/to/image/2/20100119/world_3.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_1" class="loop_image"> 
    <img name="animation" src="/path/to/image/1/20100119/world_2.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="daily_loop_image_0" class="loop_image"> 
    <img name="animation" src="/path/to/image/0/20100119/world_1.gif" 
     class="" border="0"> 
    </div> 
    <div id="weekly_loop_image_1" class="loop_image"> 
    <img name="animation" src="/path/to/weeklyImage/1/20100119/world_wk2max.gif" 
     class="hiddenElements" border="0"> 
    </div> 
    <div id="weekly_loop_image_0" class="loop_image"> 
    <img name="animation" src="/path/to/weeklyImage/0/20100119/world_wk1max.gif" 
     class="hiddenElements" border="0"> 
    </div> 
</div> 

ho provato:

• la memorizzazione di tutti gli elementi w/in animation_image come una stringa e l'impostazione che a be the innerHTML
• creazione di div vuote/segnaposto w/in animato on_image e li popolano singolarmente
• utilizzando appendChild invece di innerHTML
• aggiunta di un altro div sotto "animation_image" e mettere tutte le immagini/div in là con i 3 metodi di sopra di questo

Niente di tutto questo sembra funzionare in IE6 - tutti i metodi funzionano bene in FF3.0 +, IE7 +, Chrome 2+, ecc. Se esco da javascript prima di innerHTML funziona perfettamente, ma se provo anche a compilare un singolo div (all'interno di animation_image) tramite il metodo nel secondo punto elenco, si blocca e non recupera mai.

Sono sicuro di aver lasciato qualcosa, ma sono completamente fuori di testa ATM. Grazie in anticipo.

Aggiornamento: Ecco un link al javascript lungo w/XML di esempio (http://pastebin.com/m5b426a67)

Answer 1

Non so bene quanto mi sia mancato nei miei giorni e giorni di ricerca su google, ma sembra che il problema sia correlato alla "correzione" di AlphaImageLoader per la gestione di PNG trasparenti. L'articolo che ho trovato ottiene in più particolare circa la questione di fondo:

http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html

Quando ho tolto la voce nella png_fix.css pagina - nella sua forma originale - caricato perfettamente in IE6. Ora ho solo bisogno di andare e provare a convertire tutti i png (trasparenti) in gif che potrebbero non essere una soluzione fattibile.

Apprezzo molto l'aiuto di tutti e mi scuso per eventuali inseguimenti di oche selvagge che ho inviato a persone. Grazie a tutti MOLTO MOLTO.

Answer 2

Un'altra opzione potrebbe essere quella di utilizzare uno sprite. Raccogli tutte le immagini disparate in un singolo file e posiziona l'immagine grande in modo appropriato nelle div usando le proprietà di sfondo CSS (posizione, ripetizione, ecc.) Non sono sicuro di quanto siano grandi i tuoi singoli file, ma questo potrebbe funzionare per te.

Ci sono molti collegamenti su internet per come farlo, ma here is one.

Answer 3

Non c'è niente che salti immediatamente.

La prima cosa che farei è provare lo script standalone: ​​creare letteralmente una pagina HTML vuota con solo questo script. Se funziona, è probabile che un altro bit di script stia causando il problema.

Se si rompe ancora, provare a semplificare lo script. Prova a rimuovere l'output che stai inserendo in animHTML, ad esempio prova senza tutti gli attributi. Forse alert (o altrimenti in uscita) animHMTL per vedere se c'è qualcosa di ovvio in là che si rompa IE? Forse un personaggio strano/mal codificato nell'XML?

Answer 4

Ho avuto un problema simile in precedenza e l'ho risolto impostando un timeout sul metodo innerHTML.
Non sono sicuro che si applichi qui o no, ma direi solo provarlo.

Answer 5

Questo problema è uno che ho visto alcune volte.In IE, sembra (per me comunque) essere un bug quando si imposta la proprietà innerHTML con qualcosa che contenga risorse esterne (un'immagine, uno script, ecc.).

Si stanno aggiungendo alcuni tag img. Ognuno potrebbe causare questo problema. Ecco quello che vi consiglio:

Invece di costruire questo html e impostando la proprietà innerHTML

var html = '<div id="daily_loop_image_4" class="loop_image"> 
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif" 
     class="hiddenElements" border="0"> 
</div>'; 
outerDiv.innerHTML = html; 

eseguire questo script per aggiungere il codice HTML:

var div = document.createElement('div'); 
div.id = 'daily_loop_image_4'; 
div.className = 'loop_image'; 

var img = document.createElement('img'); 
img.name = 'animation'; 
img.src = '/path/to/image/4/20100119/world_5.gif'; 
img.className = 'hiddenElements'; 
img.border = 0; //Shouldn't this be done in css? 

div.appendChild(img); 
outerDiv.appendChild(div); 

Answer 6

io possa aver perso questo come solo io guardato sopra il codice, ma qualsiasi manipolazione DOM deve essere fatta dopo DOM Ready, specialmente in IE6. Hai provato questo?

$(document).ready(function(){ 
$('#animation_image').html(animHTML); 
}); 

Se avete provato questo, cercherò di approfondire ulteriormente.

Answer 7

Se non funziona altro, è possibile utilizzare un'istruzione try ... catch e visualizzare un messaggio di errore descrittivo se il tentativo viene rilevato.