Фоновую картинку поменять.
Дано
Есть на сайте 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) можно ли это сделать? |
Цитата:
|
Ну в топку или нет, это не моего ума дело. Моя задача сделать так чтобы эта огромная картинка появлялась "красиво", если есть предложения - напишите.
|
Ужать размер файла картинки. Пользователи вам спасибо не скажут за нее. А потом уже то, что сказал Андрей Параничев.
|
Сделал. Заработало.
|
Часовой пояс GMT +3, время: 12:53. |