image.onload non si attiva due volte in IE7

Question

Funziona in IE6 e FireFox; ma per qualche motivo non in IE7.

Utilizzando ASP.NET su Page_Init Popolo un elenco di capitoli che sono collegamenti all'immagine nel libro, nonché un array javascript che contiene gli ID pagina.

es.

Capitolo 1 - > href = " javascript: infiltrazioni (4); "

ecco il codice attuale che sto usando:

var availablePages = ['1002_001','1002_002','1002_003','1002_004','1002_005'];

function seePage(index) {
    $get('imgSingle').src = 'graphics/loading.gif';
    var img = new Image();
    img.src = 'get.jpg.aspx?size=single&id=' + availablePages[index];
    img.onload = function() {
         var single = $get('imgSingle');
         single.src = img.src;
    }
}

Quando clicco sul Capitolo 1, l'immagine si carica bene su tutta la linea (IE6,7, FF) e anche facendo clic su un secondo capitolo funziona; tuttavia, in (e solo in) IE7 fa doppio clic sullo stesso capitolo due volte (chap1, chap2, quindi chap1) l'immagine si blocca sull'immagine di "caricamento" ... Sto tirando fuori i capelli qui ragazzi ... .

Answer 1

È causato dal fatto che IE memorizzerà nella cache l'immagine e l'evento onload non verrà mai generato dopo che è già stato caricato.

Devi posizionare l'evento onload prima di src.

var availablePages = ['1002_001','1002_002','1002_003','1002_004','1002_005'];

function seePage(index) {
    $get('imgSingle').src = 'graphics/loading.gif';
    var img = new Image();
    img.onload = function() {
         var single = $get('imgSingle');
         single.src = img.src;
    }
    img.src = 'get.jpg.aspx?size=single&id=' + availablePages[index];
}

Answer 2

Un altro modo per farlo è verificare se l'immagine è già caricata con image.complete . Ad esempio:

var img = new Image();
img.src = 'foo.jpg';
if(img.complete){
    img.onload = function(){ /* ... */ };
} else {
    /* execute something else, or the same. */
}

Ho riscontrato questo comportamento in IE6 e 7.