Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2009, 14:50
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

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

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

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

Как это сделать без задержки?
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2009, 15:03
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,022

Загружать в отдельный див с top:-1000px вместе со всеми и когда надо ставить в качестве фона.
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2009, 15:14
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

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

Это делается примерно так:
var bigImage = new Image();
// Устанавливаем обработчик события загрузки изображения:
bigImage.onload = function() {
    // Тут меняем фон нужного элемента:
    someElement.style.backgroundImage = "url(путь_к_большой_картинке)";
};
// Начинаем подгружать изображение:
bigImage.src = "путь_к_большой_картинке";
Ответить с цитированием
  #4 (permalink)  
Старый 05.08.2009, 15:29
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

я делал так:

var heavyImage = new Image();

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

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


в итоге когда меняется картинка, то на время появляется просто белая область и потом только появляется нужная картинка
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2009, 16:08
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Jurasmi,
Значит это уже тормоза отрисовки изображения. Насколько оно большое?
Может лучше его загружать поверх исходного изображения, а не вместо него?
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2009, 16:30
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

Картинка около 500кб.
Пока я сделал так: подложил ещё один div, у него задал фоновую картинку, т.е. получилось два div-а один в другом с разными фоновыми картинками, при загрузке видна верхняя упрощённая картинка, через некоторое время я убираю эту фоновую картинку и становиться видна нижняя- "тяжёлая".
Плюс в том, что не появляется белая область и картинка меняется мгновенно; минус - что картинка меняется "скачком", теперь хочется убирать картинку постепенно, но кажется что фон плавненько не поменяешь или это не так? (использую prototype и scriptaculous) можно ли это сделать?
Ответить с цитированием
  #7 (permalink)  
Старый 05.08.2009, 16:32
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Jurasmi
Картинка около 500кб.
Картинку-то поменьше бы. В топку сайты с такими картинками.
Ответить с цитированием
  #8 (permalink)  
Старый 05.08.2009, 16:37
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

Ну в топку или нет, это не моего ума дело. Моя задача сделать так чтобы эта огромная картинка появлялась "красиво", если есть предложения - напишите.
Ответить с цитированием
  #9 (permalink)  
Старый 05.08.2009, 16:49
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Ужать размер файла картинки. Пользователи вам спасибо не скажут за нее. А потом уже то, что сказал Андрей Параничев.
Ответить с цитированием
  #10 (permalink)  
Старый 06.08.2009, 11:18
Кандидат Javascript-наук
Отправить личное сообщение для Jurasmi Посмотреть профиль Найти все сообщения от Jurasmi
 
Регистрация: 25.11.2008
Сообщений: 115

Сделал. Заработало.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поменять слова местами iceman Общие вопросы Javascript 1 23.06.2009 16:14
Как поменять местами элементы в дереве элемента родителя? rar11 Events/DOM/Window 8 01.04.2009 18:53
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14
Как поменять SRC у Img в Pocket IE Maxidrom Events/DOM/Window 2 08.10.2008 15:05
JS'ом поменять textDecoration только для случаев link и visited lancer Элементы интерфейса 3 05.04.2008 20:51