У меня есть сайт фотогалереи. Есть 17 больших изображений, которые я хочу предварительно загрузить, прежде чем позволить пользователю щелкнуть любую из миниатюр. Идея состоит в том, что когда финальное изображение загружено, я могу отобразить страницу и гарантировать, что когда пользователь нажимает на миниатюру, отображается большое изображение (и оно еще не загружается). Я не знаю URL-адреса изображений, пока не получу данные, подобные JSON-P, из вызова $.getScript().
Итак, у меня есть этот код в http://www.stephentang.net/j/photoModule.js< /а>
$.each(self.jsonObj.imageItems, function(index) {
$("<img />").attr("src", STP.HOSTNAME + self.jsonObj.imageItems[index].imgSrc).load(function() {
num_left_to_load = num_left_to_load - 1;
console.log('Left to Load: ' + num_left_to_load);
if (num_left_to_load <= 0) {
if (typeof callback === "function") {
console.log('callback is triggered');
$("#loading-div").remove();
self.jqFilmstrip.css('display', 'block');
self.jqFeaturedPhotoImg.css('display', 'block');
callback.apply(context);
}
}
});
});
Я поставил несколько операторов console.log(). В FF3.5+ и Safari num_left_to_load достигает 0, что запускает функцию обратного вызова. В IE8 (и, возможно, IE7) num_left_to_load никогда не достигает 0. В результате страница зависает в сообщении "Загрузка...".
Я не ищу подключаемого решения.
Спасибо за чтение.
РЕДАКТИРОВАТЬ: я удалил сообщение "Загрузка..." и больше не скрываю страницу. Кажется, в IE8 после первой загрузки изображения кэшируются, поэтому метод load() не работает, в результате чего счетчик не достигает 0.
РЕДАКТИРОВАТЬ: я попробовал window.ready(), но окно загружается очень быстро.
РЕДАКТИРОВАТЬ: кажется, что IE6-8 кеширует изображения при первой загрузке, а затем проверяет кеш перед выполнением исходящих запросов, поэтому .load() не всегда работает с ними.
