Постраничная ленивая загрузка (lazy load) постов
Иногда требуется ускорить работу сайта и технология ленивой загрузки - это хорошее решение. В прошлой статье про Lazy Load мы говорили о том как подгружать картинки, сегодня мы поговорим об одном простом способе с помощью lazy load сделать постраничную подгрузку
Web-hosting rating: 8 out of 10 with 325 ratings

Видеоурок к статье

Что такое технология lazy load

В прошлой статье мы рассмотрели lazy load для картинок. Технология LazyLoad позволяет увеличить скорость загрузки сайта.

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

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

 

Реализация lazy Load для постов

Давайте в этот раз реализуем постраничную ленивую подгрузку для 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. Также вы можете подписаться на нашу почтовую рассылку, чтобы быть в курсе о новых и полезных материалах для веб-разработчика.

 





Читайте также


Что такое NodeJS и npm?

XAMPP - как установить и настроить на Mac (Mojave, Sierra)

Как самостоятельно изучить веб-программирование

Взломали Cкайп, что делать?

Что такое реферальный спам в Google Analytics

Как стать профессиональным веб-разработчиком

Методы setTimeout и setInterval в Javascript

Реализация Lazy Load на Jquery

Три полезных CSS свойства для работы с изображениями

Массивы в Javascript

Что такое TypeScript

CSS3 - Эффект вращения

Sublime Text 3 - удобный редактор кода для веб-разработчиков

Установка и настройка веб-сервера для сайта в Ubuntu

Полезные приложения для веб-разработчиков в Google Chrome

Модальное окно на Jquery

GIT команды: Быстрый старт для новичков

Что такое конструктор в объектно-ориентированном программировании

Что такое объектно-ориентированное программирование

Как отправить форму без перезагрузки страницы (AJAX)

Как быстро создать сайт и привлечь поисковый трафик

Bitbucket: Крутой облачный GIT репозиторий

Javascript: Классы в Javascript

Что такое веб-хостинг и как выбрать хостинг для сайта

SQL запросы: Основы администрирования MySQL

Команды Linux: оболочка BASH

Joomla CMS: Преимущества и недостатки

Качественный сайт: семь ключевых свойств



Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.



Комментарии





Дмитрий ответить
" Теперь нам нужно создать каталог pages и создать в нем для примера четыре страницы: page1.html, page2.html, page3.html, page2.html " в конце нужно исправить опечатку page2.html на page4.html . Спасибо.
Сергей Никонов [АДМИНИСТРАТОР] ответить
Спасибо, Дмитрий. Поправили.
Сергей ответить
Цитата: "В следующих статьях мы рассмотрим другое решение, у которого не будет проблем с SEO." Сколько уже жду жду и чёт нет этой статьи... Когда будет статья? Если уже есть, дайте ссылку, пожалуйста.
Илья ответить
Да, хорошее решение, но без SEO теряет практический смысл!

Оставить комментарий









Поиск хостинга



HDD (mb)
8000
Максимальная цена за месяц, (RUB)
700

Дополнительно







Новые статьи

















ВСЕ СТАТЬИ


Обзоры хостинга















Категории


24x7 Support Web Hosting
Angular JS Web Hosting
Apache Web Hosting
ASP.NET Web Hosting
CPanel Web Hosting
Cron Web Hosting
DirectAdmin Web Hosting
Django Web Hosting
EMail Web Hosting
FireBird Web Hosting
Free Domain Web Hosting
GIT Web Hosting
Jabber Web Hosting
Java Web Hosting
JavaScript Web Hosting
JBoss Web Hosting
JSP Web Hosting
Linux Web Hosting
MERCURIAL Web Hosting
MongoDB Web Hosting
MySQL Web Hosting
NGinx Web Hosting
NodeJS Web Hosting
Perl Web Hosting
PHP Web Hosting
PostgreSQL Web Hosting
Python Web Hosting
Ruby Web Hosting
Russian Web Hosting
Servlets Web Hosting
Spring Web Hosting
SQLite Web Hosting
SSH Web Hosting
SSL Web Hosting
Stream Web Hosting
SVN Web Hosting
TomCat Web Hosting
Unlimited HDD Space Web Hosting
Unlimited Sites Web Hosting
Unlimited Traffic Web Hosting
USA Web Hosting
VmWare Web Hosting
Windows Web Hosting