Фоновую картинку поменять.

[Jurasmi]

Дано
Есть на сайте div с фоновой картинкой (небольшого объёма).

Задача:
Поменять исходную фоновую картинку в этом div-e на другую фоновую картинку, которая весит довольно много.

Проблема вот в чём:
Когда меняю лёгкую картинку на тяжёлую видно как стара картинка исчезла, дальше на её месте белый экран, потом только через пару секунд появляется тяжёлая.
Менял как свойство imageBackground, так и класс у div.

Как это сделать без задержки?

[B~Vladi]

Загружать в отдельный див с top:-1000px вместе со всеми и когда надо ставить в качестве фона.

[Андрей Параничев]

Я не очень понял задачу, но возможно вам просто нужно подождать, когда загрузится "тяжелая" картинка и заменять исходную только после загрузки?

Это делается примерно так:

var bigImage = new Image();
// Устанавливаем обработчик события загрузки изображения:
bigImage.onload = function() {
    // Тут меняем фон нужного элемента:
    someElement.style.backgroundImage = "url(путь_к_большой_картинке)";
};
// Начинаем подгружать изображение:
bigImage.src = "путь_к_большой_картинке";

[Jurasmi]

я делал так:

var heavyImage = new Image();

//определяем путь к картинке, 
в это время, как я понял, картинка начинает загружаться: "Когда назначаешь свойство src имиджу, начинается его скачивание/проверка с сервера" 
heavyImage.src = "путь";

//как только картинка загружена, меняю стиль
heavyImage.onload = function() {
    someElement.style.backgroundImage = 'url(' + heavyImage.src + ')';
};

в итоге когда меняется картинка, то на время появляется просто белая область и потом только появляется нужная картинка

[Андрей Параничев]

Jurasmi,
Значит это уже тормоза отрисовки изображения. Насколько оно большое?
Может лучше его загружать поверх исходного изображения, а не вместо него?

[Jurasmi]

Картинка около 500кб.
Пока я сделал так: подложил ещё один div, у него задал фоновую картинку, т.е. получилось два div-а один в другом с разными фоновыми картинками, при загрузке видна верхняя упрощённая картинка, через некоторое время я убираю эту фоновую картинку и становиться видна нижняя- "тяжёлая".
Плюс в том, что не появляется белая область и картинка меняется мгновенно; минус - что картинка меняется "скачком", теперь хочется убирать картинку постепенно, но кажется что фон плавненько не поменяешь или это не так? (использую prototype и scriptaculous) можно ли это сделать?

[Kolyaj]

Картинка около 500кб.

Картинку-то поменьше бы. В топку сайты с такими картинками.

[Jurasmi]

Ну в топку или нет, это не моего ума дело. Моя задача сделать так чтобы эта огромная картинка появлялась "красиво", если есть предложения - напишите.

[Kolyaj]

Ужать размер файла картинки. Пользователи вам спасибо не скажут за нее. А потом уже то, что сказал Андрей Параничев.

[Jurasmi]

Сделал. Заработало.