Веб-заметки и Веб-подсказки

Иногда для слабых конекшенов есть смысл задуматься о предварительной подгрузке (прелоаде) изображений, которые участвуют в скриптах и весят не мало.

Примером может служить обычная галерея изображений, которая управляется с помощью JavaScript. Вместо того, чтобы грузить все изображения одновременно, можно это делать по очереди с определенным приоритетом, или сначала загрузить первое изображение, а потом все остальные.

Делается это так:

// создаем объект картинки
var preloadedImg = new Image();
// задаем ей источник изображения (путь к картинке),
// тем самым запускаем предподгрузку изображения
preloadedImg.src = "/images/example.png";
// Назначаем события, которые начнут выполнятся
// только после полной загрузки изображения
preloadedImg.onload = function(){
alert("Картинка загружена полностью!");
}


Обнаружено, что в Internet Explorer обработчик события onload может не вызываться, если картинка была ранее загружена и сохранена в кэше веб-браузера. Решить эту проблему можно с помощью свойства изображения complete, которое информирует нас загружена ли катринка.
Таким образом выше приведенный код будет переписан таким образом:

var preloadedImg = new Image();
preloadedImg.src = "/images/example.png";
// Создаем обработчик, который должен выполнится при загрузке изображения
var myImageHandler = function() {
alert("Картинка загружена полностью!");
}
// Проверяем загружено ли изображение
if(preloadedImg.complete) {
// Если да, то просто выполняем обработчик
myImageHandler();
} else {
// Иначе - инициализируем событие onload
preloadedImg.onload = myImageHandler;
}