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

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

Сегодня мы собираемся объяснить, как это работает с ванильным javascript, css и html.

Чтобы понять, как все это работает, давайте сначала разберемся, как все приложение будет построено вместе. Для этого есть три компонента:

  • html, содержащий изображения и индикатор загрузки
  • файл css, который управляет анимацией индикатора загрузки и размером изображений
  • файл javascript, содержащий логику для получения изображений, логику для определения, когда пользователь прокручивает страницу до конца, а также логику тайм-аута, чтобы дать время для загрузки новых изображений, когда пользователь прокручивает вниз, чтобы получить больше изображений.

Давайте посмотрим на следующий HTML-файл:

Здесь у нас есть контейнер, в котором на данный момент нет изображений. Что касается получения изображений, это будет объяснено, когда я покажу, как написана логика javascript.

Вторая часть - это загрузка. Анимация индикатора загрузки будет контролироваться файлом css. Этот индикатор загрузки по умолчанию скрыт, но для отображения индикатора загрузки будет доступно правило css. Когда пользователь прокручивает страницу вниз, прослушиватель событий добавит класс show в div загрузки, чтобы отобразить индикатор загрузки.

Теперь давайте посмотрим на часть css:

Ладно, это очень много, поэтому позвольте мне разобрать его по частям.

Давайте посмотрим на правило загрузки css. Обратите внимание, что непрозрачность равна 0; это скрывает индикатор загрузки с экрана. У нас также есть дополнительное правило - .loading.show. Это будет применяться только тогда, когда div, который содержит класс загрузки, также содержит класс шоу. Класс шоу будет добавлен в файл javascript, когда пользователь прокрутит страницу до конца.

Чтобы сделать это очевидным, вот как это будет выглядеть за кадром в html, когда индикатор загрузки:

‹Div class =” загрузка шоу ”/›

Я расскажу о том, как удаляется класс show, когда мы переходим к файлу javascript. Что еще важнее, так это то, что .loading.show будет отображать индикатор загрузки с непрозрачностью 1.

Давайте посмотрим на свойство .ball css:

Здесь у нас есть блок display: block, который создает пространство над и под индикатором загрузки. Он также резервирует целую строку специально для самого индикатора загрузки. Я также установил свойство animation-duration, которое определяет, как долго будет работать анимация индикатора загрузки.

Функция тайминга анимации определяет, как будет развиваться анимация (например, медленное скольжение, постепенное скольжение, медленное скольжение, но повторение скольжения).

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

В нашем случае мы позволяем кружкам загрузки (части индикатора загрузки) скользить, но повторяться в течение бесконечного периода, поэтому для свойства animation-iteration-count установлено значение infinite. Это определяет, как часто будет происходить анимация.

Давайте подробнее рассмотрим еще несколько правил CSS с шарами:

Давайте посмотрим, что означают @keyframes.

@keyframes указывает код анимации. У него два значения: от и до значения. Это указывает, что эффект анимации, который будет иметь место, будет постепенно изменен на что-то другое.

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

При скольжении мы только описываем, какой будет его анимация, которая скользит по горизонтали на 1em.

Давайте посмотрим на CSS для каждого div шара. Все эти шарики представляют собой точки, которые формируют индикатор загрузки. С первыми двумя div-шарами мы хотим медленно отображать индикатор загрузки, а затем увеличивать его масштаб, отображая анимацию загрузки. С помощью третьего блока шара мы просто хотим сдвинуться вправо, а с четвертым блоком шара мы показываем точку загрузки, а затем меняем анимацию (с помощью свойства animation-direction).

Много чего нужно переварить, правда? CSS делает много необычных анимационных эффектов с индикатором загрузки. Давайте держимся подальше от логики css и посмотрим, как логика javascript обрабатывает вещи за сценой:

Для этого есть несколько компонентов. Одна - это функция для получения изображений, а другая - прослушиватель событий для прокрутки, который определяет, когда отображать индикатор загрузки и получать новые изображения.

Давайте посмотрим на функцию getImages. Здесь мы выполняем вызов API для получения фотографий со страницей и ограничением в качестве параметров URL. На странице указывается, с какой страницы по URL-адресу мы получаем фотографии, и эта страница увеличивается каждый раз, когда вызывается эта функция, каждый раз визуализируя разные изображения.

Как только api возвращает информацию img, мы создаем 4 разных элемента img, добавляя URL-адрес, который указывает на фактическое изображение, в качестве атрибута src. После этого мы добавляем каждый из этих элементов img в контейнер. Поскольку мы только что загрузили новые изображения, мы также можем удалить класс show из контейнера div, эффективно скрывая индикатор загрузки.

У нас есть еще одна функция - showLoading. Ищем div индикатора загрузки и добавляем к нему класс show. Логика css изменит непрозрачность индикатора загрузки на 1, когда класс show является частью div индикатора загрузки.

И последнее, но не менее важное: мы вызываем window.addEventListener для функции прокрутки. Здесь мы пытаемся получить доступ к высоте прокрутки и высоте клиента из корневого документа, который по сути является корневым узлом html-страницы.

Что же такое scrollTop, scrollHeight или clientHeight?

Давайте посмотрим на следующее изображение:

Когда у нас есть страница, полная сообщений, для просмотра которой потребуется несколько прокруток, у нас есть clientHeight, что мы и видим в данный момент. У нас есть scrollTop - высота всего содержимого над текущими сообщениями, которые мы видим в данный момент. У нас также есть scrollHeight - высота всего содержимого фактической страницы, видимого или невидимого. Здесь мы проверяем, если clientHeight + scrollTop ≥ scrollHeight -5, мы получим больше изображений.

Что это обозначает? Это означает, что когда clientHeight + scrollTop почти равен или больше scrollHeight, у нас заканчивается содержимое для прокрутки вниз. Именно тогда мы знаем, что можем получить больше фотографий, что является частью требования для создания бесконечной фотогалереи.

Итак, мы рассмотрели все части, но почему это важно?

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

Во-вторых, это поможет вам лучше понять, как работают css-анимации, и понять, как запускаются вызовы api при инициализации и т. Д.

Вот и все! Попробуйте реализовать это самостоятельно и посмотрите, как это получится! Если вы хотите увидеть, как это реализовано в React, вы также можете прочитать следующую статью:

Https://kaleongtong282.medium.com/infinite-scroll-with-photo-gallery-in-react-c7219b8be2a0

Удачного кодирования.