image.onload не срабатывает дважды в IE7

Question

Он работает в IE6 и FireFox;но почему-то не в IE7.

Используя ASP.NET в Page_Init, я заполняю список глав, которые являются ссылками на изображение в книге, а также массив javascript, содержащий идентификаторы страниц.

бывший.

Глава 1 --> href="javascript:seePage(4);"

вот фактический код, который я использую:

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

Когда я нажимаю на главу 1, изображение загружается нормально по всем направлениям (IE6,7,FF), и нажатие на ссылку второй главы также работает;однако в (и только в) IE7 дважды щелкая одну и ту же главу (глава 1, глава 2, затем снова глава 1), изображение застревает на «загружаемом» изображении...Ребята, я рву на себе волосы...

Answer 1

Это вызвано тем, что IE кэширует изображение, и событие onload никогда не сработает после того, как оно уже загружено.

Вам необходимо разместить событие загрузки перед 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

Другой способ сделать это — проверить, загружено ли уже изображение с помощью image.complete.Например:

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

Я испытал такое поведение в IE6 и 7.