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

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

Как и в большинстве случаев, начинаем с того, что подключаем библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
А сейчас нужно немножко отвлечься и я объясню вам суть метода. Все это затевается для того, чтобы не грузить все элементы сайта (ваше портфолио или отзывы), а подгружать их по мере необходимости. Например, при клике пользователя по кнопке "Показать еще". Таким образом, страница будет грузиться намного быстрее. А теперь суть, при помощи ajax технологии мы будем подгружать нужный элемент (div) и стороннего файла на наш лендинг. Вот так все просто, как в теории, так и на практике, и вы в этом скоро убедитесь.
Теперь давайте создадим основной блок, например, с картинками наших работ. Предположим мы рисуем иконки, и будем подгружать их при клике по кнопке. Я создал такую структуру:
<div class="mainWrapper">
<h1>Портфолио</h1>
<div id="smartPortfolio">
<div class="ourWork">
<img src="./img/ico1.png" alt="Первый набор иконок">
</div>
<div class="ourWork">
<img src="./img/ico2.png" alt="Второй набор иконок">
</div>
</div>
<div id="moreButton" onclick="lazyload.load()">
<span>Показать еще...</span>
</div>
<div id="loadingDiv">
<span>Загрузка данных</span>
</div>
</div>
Как видите, все - просто. Но на что нужно обратить внимание? А обратить внимание нужно на div с id="smartPortfolio", id="moreButton" и id="loadingDiv", так как они используются в скрипте, который и помогает нам загружать контент с других страниц. SmartPortfolio - это "контейнер" для нашего портфолио. MoreButton - это будет наша кнопка, при клике на которую загружается еще одна часть портфолио. LoadingDiv - область, в которую будет выводиться текст, когда портфолио будет полностью открыто, либо возникнет какая-нибудь ошибка.
Например, часть из читателей все равно будет пытаться тестировать этот скрипт не на сервере, а просто откроют индексный файл в браузере. В таком случае они увидят сообщение об ошибке. Кроме того, при совсем медленном соединении, на загрузку файлов может понадобиться время, и чтобы пользователь понимал, что процесс идет, можно вписать туда сообщение, что идет загрузка данных или поместить прелоадер (картинку, индикатор прогресса или еще что-то).
Сам скрипт я не писал, а нашел на одном из сайтов, автор указан в исходнике, кому интересно - посмотрите. Так как он не слишком большого размера, то приведу его весь, но если вы планируете использовать такие же названия айдишников и пути к файлам, как у меня, то можете даже не заглядывать в него, а просто подключить перед закрывающимся тегом body (в футере).
Для тех, кто планирует вносить правки вот сам скрипт:
var lazyload = lazyload || {};
(function($, lazyload) {
"use strict";
var page = 2,
buttonId = "#moreButton",
loadingId = "#loadingDiv",
container = "#smartPortfolio";
lazyload.load = function() {
var url = "./pages/" + page + ".html";
$(buttonId).hide();
$(loadingId).show();
$.ajax({
url: url,
success: function(response) {
if (!response || response.trim() == "NONE") {
$(buttonId).fadeOut();
$(loadingId).text("Портфолио полностью загружено");
return;
}
appendContests(response);
},
error: function(response) {
$(loadingId).text("К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу.");
}
});
};
var appendContests = function(response) {
var id = $(buttonId);
$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;
};
})(jQuery, lazyload);
Итак, теперь стоит поговорить о тех файлах, из которых мы будем подгружать информацию. Скрипт предполагает, что это будут файла с именами 2.html...5.html и т.д. В которых лежит наша информация. Например, у меня первым подгружается файл 2.html и он имеет такое содержимое:
<div class="ourWork">
<img src="./img/ico3.png" alt="третий набор иконок">
</div>
В моей структуре сайта, страницы из которых будет браться информация для последующей загрузке при клике, лежит в папке pages. Там три файла, два из которых заполнены, а последний - пустой. Это предполагает логика скрипта.
Путь в скрипте указан следующим образом:
var url = "./pages/" + page + ".html";
Если вы планируете использовать другой путь, не забудьте заменить его в скрипте. Кроме того, если вы использовали другие айдишники, то и их придется переопределить в скрипте. Вот тут:
buttonId = "#moreButton",
loadingId = "#loadingDiv",
container = "#smartPortfolio";
И, как я уже говорил, перед закрывающимся тегом body подключаем сам скрипт:
<script type="text/javascript" src="./js/lazyload.js"></script>
Вот так на landing page можно реализовать "ленивую загрузку". Присылайте еще темы, на которые вы хотели-бы почитать статью на блоге. По мере возможности буду стараться публиковать не запланированный материал, а тот, о котором спрашиваете вы в разделе "Ваши предложения". А на сегодня - все. Пока!
13 комментариев
Благодарю, это я спрашивал.
Ну надеюсь получилось, и это то, что нужно))
Столкнулся с проблемой. Когда список заканчивается, то надпись "Показать еще..." не исчезает. Если ее нажать еще раз, то выскакивает сообщение "К сожалению, возникла какая-то ошибка при запросе. Пожалуйста, обновите страницу." (в образце так же). Можно ли как-то с этим бороться?
А нет, теперь разобрался. Последний файл должен быть пустым. Тогда появляется надпись "Портфолио полностью загружено". Но все таки, нельзя ли сделать так, чтобы просто ничего не появлялось на последнем файле?
Вот если бы кнопку "Показать еще..." вложить в каждый последующий файл, а в последний не вкладывать. Но тогда, наверное, работать не будет.
Или бы переписать скрипт так, чтобы можно было вручную устанавливать количество страниц. По алгоритму: если номер страницы = 5, то не показывать кнопку "Показать еще...". Но я сам не осилю подобное программирование.
Нет, просто вывод я знаю как сделать через плагин, но нужно именно подгружать для скорости загрузки страницы.
Я пробовал вставить Ваш код. И на загруженные файлы на открываются в модальном окне + паралакас который ниже не работает((
Не твой день, у всех работает. Блин, пиши подробнее, если хочешь, чтобы тебе помогли. Есть ли ошибки в консоли? Если да - исправь их сначала.
Как сделать чтобы при прокрутке до конца странички автоматом переходило на следующую? Спасибо за ваше время!
Alisa @ __www.dogica.com
Это далеко от темы landding page. С подобными вещами на многостраничных сайтах не разбирался.
хей бро, поставь в стили td.gutter *{user-select: none} а то неудобно инфу выделять, ну или пост-обработка то что копируется
var id = $(buttonId); - что делает эта переменная в коде?