В прошлой статье мы рассмотрели lazy load для картинок. Технология LazyLoad позволяет увеличить скорость загрузки сайта.
Достигается это тем, что браузер выводит не сразу весь контент страницы, а только те данные, которые просматривает в данный момент пользователь.
И по мере того, как пользователь будет скролить страницу вниз (иногда в бок), будут подгружаться новые данные.
Давайте в этот раз реализуем постраничную ленивую подгрузку для div. Сделаем это с помощью Jquery плагина jscroll.
Итак, начнем:
Создайте страницу index.html и поместите в нее такой код:
Здесь мы подключили библиотеку Jquery и библиотеку jscroll.
Создали div с классом scroll и поместили в него ссылку на страницу, которую нужно подгрузить.
Строкой $('.scroll').jscroll() сказали, что нужно обработать div с классом jscroll нашей библиотекой.
Теперь нам нужно создать каталог pages и создать в нем для примера четыре страницы: page1.html, page2.html, page3.html, page4.html
В реальности это будет одна страница написана например на php, где в get запросе будет указан параметр вывода, например выводить по 10 постов и в конце страницы будет ссылка на следующие десять постов и так далее.
Страница page1.html
Страница page2.html
Страница page3.html
Страница page4.html
Обратите внимание, что в конце каждой страницы, кроме последней, есть ссылка на следующую страницы. Эти ссылки и подгружаются при скролинге мыши.
Конечно, решение интересное, но в нем есть главный недостаток. И этот недостаток заключается в том, что поисковые роботы не умеют работать с javascript и будут проблемы с индексацией.
В этой статье мы рассмотрели ленивую подгрузку страниц. В следующих статьях мы рассмотрим другое решение, у которого не будет проблем с SEO.
Исходный код к статье и видеоуроку вы можете скачать здесь.
Подписывайтесь на наш канал Youtube, вступайте в группу VK. Также вы можете подписаться на нашу почтовую рассылку, чтобы быть в курсе о новых и полезных материалах для веб-разработчика.
XAMPP - как установить и настроить на Mac (Mojave, Sierra)
Как самостоятельно изучить веб-программирование
Что такое реферальный спам в Google Analytics
Как стать профессиональным веб-разработчиком
Методы setTimeout и setInterval в Javascript
Реализация Lazy Load на Jquery
Три полезных CSS свойства для работы с изображениями
Sublime Text 3 - удобный редактор кода для веб-разработчиков
Установка и настройка веб-сервера для сайта в Ubuntu
Полезные приложения для веб-разработчиков в Google Chrome
GIT команды: Быстрый старт для новичков
Что такое конструктор в объектно-ориентированном программировании
Что такое объектно-ориентированное программирование
Как отправить форму без перезагрузки страницы (AJAX)
Как быстро создать сайт и привлечь поисковый трафик
Bitbucket: Крутой облачный GIT репозиторий
Javascript: Классы в Javascript
Что такое веб-хостинг и как выбрать хостинг для сайта
SQL запросы: Основы администрирования MySQL
Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.
