<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

В курсе содержится вся необходимая теория, а также множество практических примеров, в том числе, и из моей личной практики.

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Реализация бесконечной прокрутки на JavaScript

Реализация бесконечной прокрутки на JavaScript

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

Кратко о бесконечном скроллинге

Так, например, Facebook загружает новые статьи по мере того как проматываете страницу вниз. Это приводит к более быстрой загрузке всего сайта, так как пропадает необходимость загрузки всего контента сразу. И для достижения подобного, Facebook использует технику, называемую бесконечным скроллингом.

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

Реализация

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

<!doctype html>
<html>
    <head>
        <meta charset = "utf8" />
        <title>Бесконечный скроллинг с JavaScript</title>
    </head>
    <body>
        <div id="infinite-scroll">
            <div>
     <script>
       for( let i = 0; i < 100; i++ ) 
         document.write("<div>Случайный текст или еще, что то</div>");
     </script>
           </div>
        </div> 
        <script>
        
            window.addEventListener("scroll", function(){
            
                var block = document.getElementById('infinite-scroll');
                var counter = 1;
                
                var contentHeight = block.offsetHeight;      // 1) высота блока контента вместе с границами
                var yOffset       = window.pageYOffset;      // 2) текущее положение скролбара
                var window_height = window.innerHeight;      // 3) высота внутренней области окна документа
                var y             = yOffset + window_height;
                
                // если пользователь достиг конца
                if(y >= contentHeight)
                {
                    //загружаем новое содержимое в элемент
                    block.innerHTML = block.innerHTML + "<div>Случайный текст или еще, что то</div>";
                }
            });
            
        </script>
    </body>
</html>

По умолчанию, Facebook и Вконтакте всегда отображает некоторое количество постов, при первой загрузке страницы. А по мере того, как пользователь прокручивает страницу, внизу отображаются другие сообщения.

В приведенном выше примере кода мы добавляем некоторый демонстрационный текст в область содержимого, когда пользователь заканчивает чтение, т.е. достигает конца элемента #infinite-scroll. Здесь мы напрямую добавляем случайный текст, но на реальном сайте вы скорее всего будете получать новые данные, используя AJAX.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.