Подробнее о загрузке изображений в книгах читайте в Техноведре

В книгах бюро много иллюстраций: в «Типографике и вёрстке» их 660, в «Пользовательском интерфейсе» — уже 524. Чтобы читатель не ждал, пока картинки загрузятся, книжный движок заранее скачивает нужные картинки.

Подробнее о загрузке изображений в книгах читайте в Техноведре

Чтобы браузер не тормозил из‑за такого количества изображений, книжный движок выгружает из памяти уже не используемые картинки. Для этого движок ведёт историю чтения и выгружает изображения из «старых» разворотов так, чтобы загруженные изображения остались на X последних разворотов.

На мобильных устройствах и неретиновых десктопах для выгрузки изображений из памяти, мы заменяем их на прозрачный однопиксельный гиф:

const BLANK_GIF = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';

$('.image.is__ready.can__unload').each(function() {
  $(this)
    .css('background-image', BLANK_GIF)
    .removeClass('is__ready can__unload');
});
На Айпаде не освобождали память ни display: none, ни background‑image: none

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

Чтобы отслеживать потребление памяти в Айпаде или Айфоне, советую XCode Instruments (Activity Monitor). На десктопе — Chrome Task Manager (More Tools — Task Manager) и Heap Snapshot (Developer Tools — Memory).

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы