image-loading.md

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

Можно залить область под картинкой подходящим цветом. Но это не всегда возможно.

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

Если в проекте используется много растровых картинок, то наверняка используется какой-то инструмент для их ресайза и кадрирования. Например, что-нибудь на базе imagemagick.

Вы запрашиваете http://site.com/images/image.jpg?width=300&height=300 и получаете картинку image.jpg, уменьшенную до 300х300.

При этом на сервере в консоли выполняется что-то вроде:

convert image.jpg -resize 300x300 image-resized.jpg

Результат кэшируется и отдается клиенту.

Но можно пойти дальше.

Если уже есть инструмент для работы с картинками, можно его развить и добавить опцию размытия. Например:

convert image.jpg -resize 30x30 -blur 0x5 image-resized-and-blurred.jpg

Дополнительно можно попробовать уменьшение качества полученной картинки.

Зачем нужна такая картинка?

Получив уменьшенную в 10 раз (по ширине и высоте) копию картинки можно вывести ее вместо большой.

<img src="http://site.com/images/image.jpg?width=30&height=30&blur" width="300" height="300" alt="">

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

Весить такая картинка будет очень немного и отобразится почти мгновенно.

После полной загрузки сайта можно будет запросить полноразмерную картинку скриптом и подменить ее после полной загрузки. Сделать это тоже можно эффектно:

<header class="header">
  <img class="image-original" data-src="http://site.com/images/image.jpg?width=300&height=300" width="300" height="300" alt="">
  <img class="image-stub" src="http://site.com/images/image.jpg?width=30&height=30&blur" width="300" height="300" alt="">
</header>

.header {
  position: relative;
}
.image-original {
  opacity: 0;
}
.image-stub {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s;
}
.header_loaded .image-original {
  opacity: 1;
}
.header_loaded .image-stub {
  opacity: 0;
}

var img = new Image();
var src =  document.querySelector('.image-original').getAttribute('data-src');
img.onload = function() {
  document.querySelector('.image-original').setAttribute('src', src);
  document.querySelector('.header').classList.add('header_loaded')
}
img.src = src;