image.onload não disparar duas vezes em IE7

Question

Ele funciona no IE6, e FireFox; mas por alguma razão não no IE7.

Usando ASP.NET na Page_Init eu preencher uma lista de capítulos que são links para a imagem no livro, bem como uma matriz de javascript que detém os pageIDs.

ex.

Capítulo 1 -> href = "javascript: infiltração (4);"

aqui é o código real que estou 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 clico no Capítulo 1, a imagem é carregada bem através da placa (IE6,7, FF) e clicando em um segundo link capítulo também funciona; no entanto, em (e apenas em) IE7 não clicar no mesmo capítulo duas vezes (chap1, chap2, então chap1 novamente) que a imagem ficar preso na imagem 'carregar' ... Eu estou puxando meu cabelo aqui caras .. .

Answer 1

Ela é causada porque o IE irá armazenar em cache a imagem, eo evento onload nunca fogo depois que ele já foi carregado.

Você precisa posicionar o evento onload antes do 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

Outra maneira de fazer isso é verificar se a imagem já é carregado com image.complete. Por exemplo:

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

Eu experimentei esse comportamento no IE6 e 7.