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

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

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

ex.

Глава 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), изображение застревает на «загружаемом» изображении...


javascript dom-events internet-explorer-7
person John West    schedule 24.06.2009    source источник
comment
мне нравится плагин jquery для подкачки изображений code.google.com/p/jquery-swapimage   -  person Haim Evgi    schedule 24.06.2009

Ответы (2)


arrow_upward
10
arrow_downward

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

Вам нужно разместить событие 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];
}
person Ian Elliott    schedule 24.06.2009
comment
Да благословит вас Бог бесконечным пивом, сэр. - person John West; 24.06.2009

arrow_upward
2
arrow_downward

Другой способ сделать это — проверить, загружено ли изображение уже с помощью 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.

person sholsinger    schedule 08.01.2010