Задать вопрос
@vvvadimos

Как организовать подгрузку изображений на фон?

Суть: есть допустим шапка сайт, которая растягивается на 80% высоты экрана. У нее задан фон, и картинка эта скажем так дохрена весит. В итоге при загрузке страницы фон этот грузится некрасиво. Что было придумано: изначально поставить на фон маленькую заблюренную картинку, которая растягивается на весь элемент, под ней вставить элемент с полноценной картинкой, и когда страница загрузится, плавно менять прозрачность у картинки-фейка, в итоге получается красивая смена фона на нужный. Картинка меняется при срабатывании события document onload. И вроде все хорошо, но вот если сервак затупит, и начнет отдавать какую-то мелочь с большой задержкой, фон не поменяется, пока все не загрузится, хоть сам этот фон уже давно подгрузился.
В общем вопрос в том, как организовать смену фона после загрузки самой картинки, что стоит на фоне
  • Вопрос задан
  • 340 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 1
IonDen
@IonDen
JavaScript developer. IonDen.com
Не нужно заморачиваться на эту тему. Сохраняйте картинку с опцией "прогрессив". Тогда все будет нормально по шагам загружаться, с постепенным увеличением детализации.

Это совершенно нормальная практика и все привыкли, никому глаз не режет. Тем более, что в современном мире, скорости интернета постоянно растут и подобные финты ушами сегодня уже не актуальны.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Не совсем уверен, а если попробовать повесить на сому картинку событие .load() и в нем уже прописывать смену картинок
Ответ написан
Комментировать
mannaro
@mannaro Куратор тега JavaScript
Умею профессионально гуглить
var img = new Image();
img.onload = function() {
  // тута картинка полностью загружена, меняем в шапке
};
img.src = 'url на порноразмер';


Или, как сказал Денис Инешин просто сохранейте чересстрочно (PNG)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы