Подробнее о загрузке изображений в книгах читайте в Техноведре
В книгах бюро много иллюстраций: в «Типографике и вёрстке» их 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');
});
Ретиновые десктопы считаем достаточно мощными устройствами, чтобы не выгружать изображения целиком. Поэтому на них меняем ретиновое изображение на его неретиновую версию: памяти меньше, а при случайном переходе к развороту читатель увидит неретину, а не пустой экран.
Чтобы отслеживать потребление памяти в Айпаде или Айфоне, советую XCode Instruments (Activity Monitor). На десктопе — Chrome Task Manager (More Tools — Task Manager) и Heap Snapshot (Developer Tools — Memory).
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.