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

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

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

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

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

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

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

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

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

я делал так:

var heavyImage = new Image();

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

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

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

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

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

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

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

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

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

Доброго времени суток, уважаемые форумчане!

Вижу, что топик старый, но по-моему подходит под описание моей проблемы, поэтому спрошу здесь.

Стоит задача замены фоновой картинки в зависимости от разрешения монитора/размера окна браузера. По-моему средствами CSS такое не сделать, поэтому обращаюсь за помощью к вам гуру-ява-скриптеры.

Заранее спасибо за любую помощь.

медиа запросы css