Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фоновую картинку поменять. (https://javascript.ru/forum/dom-window/4587-fonovuyu-kartinku-pomenyat.html)

Jurasmi 05.08.2009 14:50

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

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

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

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

B~Vladi 05.08.2009 15:03

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

Андрей Параничев 05.08.2009 15:14

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

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

Jurasmi 05.08.2009 15:29

я делал так:

var heavyImage = new Image();

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

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


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

Андрей Параничев 05.08.2009 16:08

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

Jurasmi 05.08.2009 16:30

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

Kolyaj 05.08.2009 16:32

Цитата:

Сообщение от Jurasmi
Картинка около 500кб.

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

Jurasmi 05.08.2009 16:37

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

Kolyaj 05.08.2009 16:49

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

Jurasmi 06.08.2009 11:18

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


Часовой пояс GMT +3, время: 12:53.