Как незаметно подменить background-image?

Хочу сделать, чтобы сайт быстро загружался даже для пользователей с медленным Интернетом.
На сайте почти все картинки background.

Для этого хочу вначале загрузить маленькую картинку в background, а затем заменить ее на большую.
Но если просто подменить background-image, то маленькая картинка исчезает, а новая медленно загружается. Т.е. все действие сводится к нулю.

Вопрос, можно ли сделать это как-то незаметно, например наложив одну картинку на другую, или уже подменять когда большая картинка полностью загружена, или еще как-то?

PS. Пока писал, на ум пришел z-index.
  • Вопрос задан
  • 623 просмотра
Решения вопроса 1
Tolly
@Tolly Автор вопроса
<div class="lazy" style="background-image: url(1_mini.jpg)" data-src="1.jpg"></div>
<div class="lazy" style="background-image: url(2_mini.jpg)" data-src="2.jpg"></div>
<div class="lazy" style="background-image: url(3_mini.jpg)" data-src="3.jpg"></div>
<div class="lazy" style="background-image: url(4_mini.jpg)" data-src="4.jpg"></div>
<div class="lazy" style="background-image: url(5_mini.jpg)" data-src="5.jpg"></div>

<script>
  var lazyImage = document.getElementsByClassName('lazy');
  img = new Array();
  for ( var i=0; i < lazyImage.length; i++ ) { img[i] = new Image(); }
  i = 0;

  ttt();

  function ttt() {
    img[i].onload = function() {
	lazyImage[i].style.backgroundImage = "url(" + lazyImage[i].getAttribute('data-src') + ")";
	i++;
	img[i].src = lazyImage[i].getAttribute('data-src');
	ttt();
    }
  }
  
 img[i].src = lazyImage[i].getAttribute('data-src');
</script>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
Chefranov
@Chefranov
Новичок
По мне это извращение, в итоге пользователь загрузит в два раза больше изображений. Посмотрите у Вадима Макеева как правильно оптимизировать изображения на сайте https://www.youtube.com/channel/UCaTfYudJUVA8cV_Bu...
Ответ написан
@402d
начинал с бейсика на УКНЦ в 1988
https://perishablepress.com/3-ways-preload-images-...

объявляешь переменную для большой картинки с обработчиком онлоад ее. Как загрузится меняешь фон.
а маленькую можно сделать инлайном в хтмл
style background-image: url(base64,fdgjdfklghdfklgjklerjhget...)
Ответ написан
BRAGA96
@BRAGA96
Я бы сделал как то так:
Ответ написан
@yadscreech
Как сказали ранее это лишняя нагрузка на интернет, лучше сделать одно цельное изображение( его можно сжать при помощи сервиса squoosh.app(картинка станет легче в разы)), ещё можно добавить фон блоку в виде цвета или градиента чтоб было хоть что-то пока грузится картинка.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы