image.onload no se dispara dos veces en IE7

Question

Funciona en IE6 y Firefox; pero por alguna razón no en IE7.

Utilizando ASP.NET en Page_Init, lleno una lista de capítulos que son enlaces a la imagen en el libro, así como una matriz de JavaScript que contiene los ID de página.

ej.

Capítulo 1 - > href = " javascript: seePage (4); "

aquí está el código real que estoy 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;
    }
}

Cuando hago clic en el Capítulo 1, la imagen se carga bien en todos los ámbitos (IE6,7, FF) y hacer clic en el enlace de un segundo capítulo también funciona; sin embargo, en (y solo en) IE7 hace clic en el mismo capítulo dos veces (chap1, chap2, luego chap1 nuevamente) la imagen se atasca en la imagen 'cargando' ... Me estoy sacando el pelo aquí chicos ... .

Answer 1

Se debe a que IE almacenará en caché la imagen y el evento de carga nunca se activará después de que ya se haya cargado.

Debe colocar el evento onload antes del 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

Otra forma de hacerlo es verificar si la imagen ya está cargada con image.complete . Por ejemplo:

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

He experimentado este comportamiento en IE6 y 7.