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

Question

[vvvadimos]

Суть: есть допустим шапка сайт, которая растягивается на 80% высоты экрана. У нее задан фон, и картинка эта скажем так дохрена весит. В итоге при загрузке страницы фон этот грузится некрасиво. Что было придумано: изначально поставить на фон маленькую заблюренную картинку, которая растягивается на весь элемент, под ней вставить элемент с полноценной картинкой, и когда страница загрузится, плавно менять прозрачность у картинки-фейка, в итоге получается красивая смена фона на нужный. Картинка меняется при срабатывании события document onload. И вроде все хорошо, но вот если сервак затупит, и начнет отдавать какую-то мелочь с большой задержкой, фон не поменяется, пока все не загрузится, хоть сам этот фон уже давно подгрузился.
В общем вопрос в том, как организовать смену фона после загрузки самой картинки, что стоит на фоне

Answer 1

[Денис Инешин]

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

Это совершенно нормальная практика и все привыкли, никому глаз не режет. Тем более, что в современном мире, скорости интернета постоянно растут и подобные финты ушами сегодня уже не актуальны.

Comments

[vvvadimos]

я тоже так думал, но сама реализация интересно как делается

[Денис Инешин]

vvvadimos: по сути очень просто. На JS. Создаете объект img. Навешиваете на него слушатель load. Ставите урл вашей большой картинки. Как только лоад сработал. Вставляете ее в шапку. Это может произойти раньше чем общий load страницы.

Answer 2

[Александр Миранович]

Не совсем уверен, а если попробовать повесить на сому картинку событие .load() и в нем уже прописывать смену картинок

Answer 3

[Александр Вульф]

var img = new Image();
img.onload = function() {
  // тута картинка полностью загружена, меняем в шапке
};
img.src = 'url на порноразмер';

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

Comments

[Виктор Виктор]

img.onload лучше навешивать до того как устанавливать src

[Денис Инешин]

Только наоборот. Слушатель нужно навесить раньше чем вы поставили src. Иначе будет не кроссбраузерно.

[vvvadimos]

вот допустим класс, который задает фон: .class{ background: url('img/b.jpg'); }
его на странице сразу нет, и я подгружаю картинку ту что стоит на фоне в .class так как вы написали, и в событии onload вешаю класс на элемент, в итоге ведь все и работать будет так как я хотел, так?

[Александр Вульф]

vvvadimos: ага

[Александр Вульф]

Денис Инешин, Виктор Виктор спасибо! Редко юзаю этот функционал, так что не знал.