Форум Сайтостроение Веб-строительство

Пагинация в интернет-магазине

S
На сайте с 04.02.2007
Offline
347
svv
862

Очень понравилась подгрузка 2-й, 3-й и далее страниц на сайте: http://mebstyling.ru/category/komody/ , но никак понять не могу КАК они так красиво сделали. По сути, ведь, в коде страницы имеются ссылки на эти страницы, видимо для поисковиков, но я то их не вижу и у меня эти страницы подгружаются. Помогите, пожалуйста, разобраться ...

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#1

Подобный плагин может такое http://infiniteajaxscroll.com/

Демо http://infiniteajaxscroll.com/examples/basic/page1.html

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
worldfoto
На сайте с 20.04.2012
Offline
213
worldfoto
#2

Это называется ленивая загрузка.

⭐ ->Лучший VPN https://u.to/i1L5IA | ⭐ - > Лучшая партнерка только с ней и зарабатываю! https://is.gd/OrRjrw
S
На сайте с 04.02.2007
Offline
347
svv
#3

А другие варианты скриптов с такой "ленивой" загрузкой подсказать можете? Увы, с инглишем совсем не дружу - с вариантом выше не разобрался :(

P
На сайте с 13.09.2013
Offline
39
provice
#4

Ленивая загрузка Lazyload это загрузка картинок по мере попадания в viewport, а здесь просто аякс пагинация.

Вам же дал товарищ ссылку, все очень просто http://infiniteajaxscroll.com/docs/getting-started.html

--------------------

Подключаем скрипты jquery и ias

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript" src="/vendor/jquery-ias/dist/jquery-ias.min.js"></script>

Ваш html должен быть таким:


<div id="posts"><!-- это контейнер для товаров-->
<div class="post"><!-- это товар--></div>
<div class="post"><!-- это товар--></div>
</div>

<div id="pagination"><!--здесь надо вывести ссылки, по которым будем ходить, его можно скрыть display:none-->
<a href="/page2/" class="next">2</a><!-- класс next выставляем для следующей ссылки, это генерирует движок при первоначальной загрузке, далее скрипт работает сам-->
<a href="/page3/">3</a>
</div>

скрипт:


var ias = jQuery.ias({
container: '#posts',
item: '.post',
pagination: '#pagination',
next: '.next'
});

ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 3})); // сколько выводить товаров
ias.extension(new IASNoneLeftExtension({text: 'Товары закончились.'}));
проблема с js При копировании текста беда с версиями JQuery

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий