image.onload ne tire pas deux fois dans IE7

Question

Cela fonctionne dans IE6 et FireFox; mais pour une raison quelconque pas dans IE7.

Utilisation d'ASP.NET sur le Page_Init Je remplis une liste de chapitres contenant des liens vers l'image du livre, ainsi qu'un tableau javascript contenant les identifiants de page.

ex.

Chapitre 1 - > href = "javascript: seePage (4);"

voici le code que j'utilise:

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;
    }
}

Lorsque je clique sur le chapitre 1, l'image se charge très bien (IE6,7, FF) et le fait de cliquer sur un lien de deuxième chapitre fonctionne également; Cependant, dans IE7 (et seulement dans) IE clique deux fois sur le même chapitre (chap1, chap2, puis chap1 à nouveau), l'image reste-t-elle bloquée sur l'image de "chargement" ... Je me tire les cheveux ici les gars .. .

Answer 1

Cela est dû au fait qu'IE va mettre en cache l'image et que l'événement onload ne se déclenchera jamais après son chargement.

Vous devez positionner l'événement onload avant le 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

Vous pouvez également vérifier si l'image est déjà chargée avec image.complete . Par exemple:

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

J'ai rencontré ce problème dans IE6 et 7.