Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni

🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!

22.05.2023

Прогрес-бар для сторінки зі світлинами. Автопрокрутка

Сьогодні доробляв вчорашній пост. За першими відкликами побачив дві проблеми.

• Світлин багато та вони важкі — а без них сторінка, фактично, поламана. Це досить легко побачити на повільному підключенні. Гарно було б робити для мобільної ширини більш компактні світлини, але це складніше. Поки що зайшов з іншого боку — прокрутка блокується, доки всі світлини не будуть завантажені. Для цього на титульному екрані додав прогрес-бар. Прогрес оновлюється на подію img.onload. Єдине, що якщо світлина вже закешована, то подія не відбудеться, тому треба спочатку перевіряти значення img.complete.

• Анімація карти прокруткою неочевидна. Добре якби вона була ще повноекранною. Але повноекранна не впевнений що буде та що потрібна. Особливо на вузьких телефонних екранах, виходить все одно робоча площа буде маленька. Сьогодні зробив автопрокрутку — там вилізла купа логіки, наприклад, якщо сторінка прокручується зверху, то автопрокрутка потрібна, а якщо відкритий якір посередині, то ні. Ще автопрокрутку треба вимикати, якщо користувач намагається крутити власноруч. Проте найгірше те, що автопрокрутка на айфоні не працює, а тільки здригається. (Реалізація самої прокрутки така: позиція визначається інтерполяцією Greensock, а далі передається у window.scrollTo. І все це відбувається в requestAnimationFrame. Може, я щось роблю неправильно, але ж помітно це тільки на iPhone.)

Одним словом, скоріше за все, взагалі приберу анімацію на прокрутку та зроблю більш очевидний елемент прокрутки на кшталт відеопрогравачів.