Простой, эффективный JavaScript, не требующий дополнительных библиотек.

Цель дизайна

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

HTML

Нам нужен атрибут или что-то подобное, которое идентифицирует соответствующие элементы. В этом примере мы будем использовать атрибут "realsrc" для сохранения URL изображения, которое должно загружаться отложенным способом и отображаться как фоновое изображение<. /em> для соответствующего контейнера. Это означает, что HTML должен выглядеть примерно так:

Прослушиватель событий

Нам нужны прослушиватели событий, которые срабатывают при соответствующих событиях. Если мы не добавим прослушиватель для load, элементы с ленивой загрузкой будут загружены только после того, как сработает первое событие прокрутки, что, как правило, не то, что нам нужно. Точно так же, если мы используем адаптивный дизайн, нам нужно прослушивать события resize, потому что пользователи могут открыть более видимую область, изменив размер окна.

Перезвони

Затем нам нужна функция обратного вызова для прослушивателей событий. В нашем примере мы назовем его refresh_handler.

Получение соответствующих элементов

Мы дали всем элементам, которые должны каким-то образом измениться, атрибут с именем «realsrc». Это означает, что теперь мы просто выбираем все элементы, которые имеют этот атрибут. Это не очень эффективно, однако нам нужно только один раз запросить эти элементы, а затем кэшировать их в переменной. Мы также должны помнить, какие элементы уже были изменены. Поскольку DOM анализируется сверху вниз, мы можем увеличить счетчик, представляющий позицию в массиве элементов, до которой мы уже изменили соответствующий элемент, чтобы мы не пытались изменить их снова.

Получение текущего окна просмотра

Самый надежный кросс-браузерный способ расчета текущего окна просмотра — использование элемента или псевдоэлемента в верхней части страницы. На моей веб-странице я использую для этого панель навигации, но вы можете просто вставить пустой контейнер в начало вашего HTML-кода и присвоить ему любой уникальный идентификатор.

Выбор и изменение элементов

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

Необязательно: Оптимизация выполнения

Определить минимальное изменение области просмотра

Мы уже кэшировали элементы и гарантировали, что мы не изменяем элемент дважды и даже дважды не проверяем, находится ли он в текущем окне просмотра. События прокрутки, к сожалению, запускаются очень быстро. Ограничение их скорости затруднено, поэтому более простое, но столь же эффективное решение состоит в том, чтобы выполнять как можно меньше кода для каждого обработчика. Мы можем добиться этого, проверив, насколько изменилось поле просмотра, в самом начале обработчика, прежде чем делать что-либо еще.

Отменить регистрацию прослушивателя событий

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

  • Полный пример кода
  • Обложка называется «Неофициальный логотип JavaScript» Криса Уильямса по лицензии WTFPL.

Не стесняйтесь поделиться своими мыслями или задать вопрос!