image.onload не срабатывает дважды в IE7
-
10-07-2019 - |
Вопрос
Он работает в 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), изображение застревает на «загружаемом» изображении...Ребята, я рву на себе волосы...
Решение
Это вызвано тем, что 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];
}
Другие советы
Другой способ сделать это — проверить, загружено ли уже изображение с помощью 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.