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

Question

[Анатолий]

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

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

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

PS. Пока писал, на ум пришел z-index.

Answer 1

[Анатолий]

<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>

Answer 2

[Eugene Chefranov]

По мне это извращение, в итоге пользователь загрузит в два раза больше изображений. Посмотрите у Вадима Макеева как правильно оптимизировать изображения на сайте https://www.youtube.com/channel/UCaTfYudJUVA8cV_Bu...

Comments

[Анатолий]

Еле нашел, где он там не лестно отзывается о div.background, предлагая воспользоваться чудо svg. Приму на вооружение этот svg формат. Но больше ничего интересного не узнал, все остальное совсем примитивно.
Ответ на свой вопрос тоже не нашел.

PS. Также услышал фразу, что у картинок приоритет выше, чем у div. Типа они загружается быстрее, так как приоритет выше.
Два вопроса:
1) Приоритет выше чем у js и css? а оно надо вообще?
2) И кто-то проверил, что грузится быстрее? Это типа браузер больше делает запросов на сервер? Проверил, а нет! Все тоже самое и на скорость это абсолютно не влияет не доли мс, только что сам проверил.

Короче, не знаю про div и img, можно конечно через svg заморочится...

Мне вот к примеру нравится сайт tass.ru, там не прям все огонь, но в целом не плохо сделано. Картинки хоть и не масштабируются, но через фон сделаны. У меня же полностью резиновый сайт, так что такую роскошь позволить не могу.

[Eugene Chefranov]

Еле нашел, где он там не лестно отзывается о div.background, предлагая воспользоваться чудо svg. Приму на вооружение этот svg формат. Но больше ничего интересного не узнал, все остальное совсем примитивно.
Ответ на свой вопрос тоже не нашел.

Смотрите, вы предлагаете сначала подгружать сначала маленькие, а потом большие картинки для тех у кого плохой интернет, но в тоже время вы не думаете, что вы загружаете картинки дважды, что не очень обрадует пользователей с плохим интернетом. Потому рекомендую просто помаксимум выжать из компрессора картинок. Делая контентные картинки бэкграундом вы во-первых теряете доступность, а во вторых ухудшаете SEO показатели своего сайта.

У меня же полностью резиновый сайт, так что такую роскошь позволить не могу.

Вы можете юзать тег img и CSS свойство object-fit, Вадим в одном из первых видео (про разбор сайта политеха) разбирает это свойство.

[Анатолий]

1) object-fit даже для IE11 не прокатит
2) со сжатием у меня все в порядке
3) пока что "до загрузка" нужна только для теста, и оставьте мне право самому решить, а надо ли оно :)

PS. Вот к примеру слайдер swiper проверил с lazy images, где Вы помогли мне найти, что я </div> пропустил. Так вот он что-то мне не зашел совсем, ищу альтернативы так сказать, накидал скрипт для ленивой подгрузки картинок, чтобы посмотреть и решить, а стоит ли. Так же планирую уменьшить размер картинок с помощью media, но это на будущее.

[Eugene Chefranov]

1) object-fit даже для IE11 не прокатит

Прокатит :) посмотрите видео https://www.youtube.com/watch?v=aZJMOVpMhtc

[Анатолий]

ИМХО ерунда это все, я не понял сути, ради чего это все?
1) Загрузка такая же, если внимательней посмотрите, так он еще и загружался дальше всех. Полифил вешать, еще кода больше.
2) Нельзя скопировать картинку? Ну для меня это только плюс.

а про div, там говорится, что можно ему role и aria-label задать, будет почти тоже самое, наверное..

PS. Мы уже давно ушли от сути вопроса :)

[Анатолий]

Сегодня посмотрел последнее видео Вадима Микеева, и решил перейти на img, понравилось про <picture>, хотел это все реализовать на js, ну да ладно через css сделаю.
Еще раз пересмотрел видео про полифил, проверил его у себя, а оно не работает, что только не делал. Короче запилил свой (подглядел в Интернете и под себя оптимизировал) полифил:

spoiler

<img src="https://loremflickr.com/640/480" data-object-fit="cover">
	<img src="https://loremflickr.com/640/480" data-object-fit="contain">

	<script>
		// Detect objectFit support
		if ('objectFit' in document.documentElement.style === false) {
			document.addEventListener('DOMContentLoaded', function () {
				Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), function (image) {
					image.style.background = 'url("' + image.src + '") no-repeat 50%/' + image.getAttribute('data-object-fit');
					image.src = 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'' +
											image.width + '\' height=\'' + image.height + '\'%3E%3C/svg%3E';
				});
			});
		}
	</script>

Вы еще не делали автоматизацию "по распиливанию" картинки?
А то не отказался бы от bash сценария, хотя без разницы на чем сценарий.

PS. ОС Debian, но это тоже не важно.

Answer 3

[Олег]

https://perishablepress.com/3-ways-preload-images-...

объявляешь переменную для большой картинки с обработчиком онлоад ее. Как загрузится меняешь фон.
а маленькую можно сделать инлайном в хтмл
style background-image: url(base64,fdgjdfklghdfklgjklerjhget...)

Comments

[Анатолий]

Инлайн не прокатит, так как картинок много и они постоянно меняются.

Статью посмотрел, к сожалению не совсем понял.
Пишу код:

<div id="preload1"></div>
<div id="preload2"></div>
<div id="preload3"></div>

<script>
function preloader() {
	if (document.getElementById) {
		document.getElementById("preload1").style.background = "url(1.jpg) no-repeat -9999px -9999px";
		document.getElementById("preload2").style.background = "url(2.jpg) no-repeat -9999px -9999px";
		document.getElementById("preload3").style.background = "url(3.jpg) no-repeat -9999px -9999px";
	}
}

function addLoadEvent(func) {
	var oldonload = window.onload;

	if (typeof window.onload != 'function') {
		window.onload = func;

	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}

}
addLoadEvent(preloader);

Смотрю инспектором, а они загружаются все разом.

Да и смысл от их загрузки, если я не знаю когда они загрузятся.
Если читать заголовок статьи, то он звучит примерно как: "Способы предварительной загрузки", ну и содержимое по аналогии, смотрят что документ загрузился и похали загружать в кеш все что не попадя.
Мой же вопрос немного другой, ну или не совсем понял посыл статьи как это сделать.

[Олег]

var im = new Image();
im.onload = function(){
  // тут ее назначить фону
}
im.src = "http://domain.tld/gallery/image-001.jpg";

[Анатолий]

Может еще подскажите реализацию всего этого?

Хочется так:
1. везде, где надо подгрузить картинку, вешаем класс
2. далее все картинки с классом "пихаем" в массив
3. далее берем из массива первую картинку и загружаем
4. ждем когда она загрузится и загружаем следующую

до шага 3 все просто, но вот 4й шаг для меня сложноват

[Олег]

а) броузер до 5ти потоков грузит с одного сайта.
б) есть еще один способ. начинать грузить при попадании нужного объекта в область видимости.
это так для развития.

еще раз смотри по той ссылке, что я дал выше. Там все кирпичики есть, они правда сложены немного
в другую конструкцию.

отличие для цикла в том, что будет не var im а уже массив для них.
но с каждым элементом мы делаем то же самое.
назначаем обработчик и соурсе.

Пусть они асинхронно тянуться не нужно ждать как вы предлагаете.

Вот такой код у меня был в свое время использован, чтобы реальные превьюшки у новостей
и товаров вместо заглушки начинали грузиться, только если посетитель до них пролистал.

(function($) {
    var imgLoadedH = false;
    var imgLoadedW = false;
    var offset = 50;
    function CheckLoad(elem) {
        var p = $(window).height() + $(window).scrollTop();
        var w = $(window).width() + $(window).scrollLeft();
        var img = $(elem);
        var s = img.attr('data-longdesc');
            var blnInRange = (img.offset().top < p + offset && img.offset().left < w + offset);
            var blnVisible = (img.is(":visible"));
            if (blnInRange && blnVisible) {
                img.attr('src', img.attr('data-longdesc')).removeClass('img-ondemand')
            }
    }
    function imgOndemand(visChange) {
        var docHeight = $(document).height();
        var docWidth = $(document).width();
        if (!imgLoadedH || !imgLoadedW || visChange) {
            $('img.img-ondemand').each(function() {
                CheckLoad(this)
            });
            $('input.img-ondemand').each(function() {
                CheckLoad(this)
            });
            imgLoadedH = ($(window).height() + $(window).scrollTop()) >= docHeight;
            imgLoadedW = ($(window).width() + $(window).scrollLeft()) >= docWidth
        }
    }
    $(function() {
        imgOndemand()
    });
    $(window).scroll(function() {
        imgOndemand()
    });
})(jQuery);

[Анатолий]

а) Спасибо за информацию про 5 потоков, но думаю, что если сервер нормальный (других не знаю), то смысла в 5-ти потоках нет, лучше использовать один, так как полоса занята будет под завязку

б) это я уже реализовал на JS без jQuery

Вопрос в силе, на какое событие повесить проверку загрузки картинок?
По времени как-то.. ну не знаю.

[Олег]

сделайте лучше дизайн так, чтобы без картинок было красиво, а с ними супер. И то, что они не успели
скачаться Вас перестанет беспокоить.
В css3 можно интересные эффекты делать через множественные бекграунды.
На моем хомяке нет картинок совсем . Прямую ссылку убрал. Автор вопроса уже посмотрел.

[Анатолий]

А теперь реклама.. :)

Answer 4

[Ihor Bratukh]

Я бы сделал как то так:

Comments

[Анатолий]

Спасибо. А не сложно написать без jQuery, а то я его не использую. Также уж реально с заменой тогда маленькой картинки на большую :)

[Ihor Bratukh]

Ну напишите, примерную логику я показал

[Ihor Bratukh]

Анатолий, ES6 / ES5

[Анатолий]

Я вопрос уже давно решил, разве не видно?

Answer 5

[yadscreech]

Как сказали ранее это лишняя нагрузка на интернет, лучше сделать одно цельное изображение( его можно сжать при помощи сервиса squoosh.app(картинка станет легче в разы)), ещё можно добавить фон блоку в виде цвета или градиента чтоб было хоть что-то пока грузится картинка.

Comments

[Анатолий]

Вопрос-то был не про это.