2

Несколько часов пытался внедрить Infinite Scroll в блоге. Цель простая, главная страница слишком длинная, хочется, чтобы она подгружалась постепенно. У авторов плагина есть идеально работающий пример, однако, что бы я ни делал, в моём случае плагин соверешенно не срабатывает. Наверно, я что-то упускаю.

Если я правильно понял, то принцип работы плагина такой: мы создаём общий div и внутри него статьи (article). При заходе на страницу человек видит 1 статью, когда прокурчивает до очередной статьи, страница увеличивается и отображается уже 2 статья и так далее. Вроде бы, это я и делаю.

Я пытался прикрепить его через ссылку

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

Пытался загрузить файл на сервер

<script src="js/infinite-scroll.pkgd.min.js"></script>

Пытался сами элементы оформить через jQuery, JavaScript и просто html, как и предлагается в документации, но всё безуспешно.

Ссылка на очень простую страницу сайта, где я пытался это реализовать: https://dinarkino.ru/new. На данный момент все параграфы загружаются разом, хотя каждый из них обёрнут в отдельный

<article class = "post"> ... </ article>

Буду очень рад помощи!

2
  • весь код в песочницу скиньте? если вы все правильно сделали, скорее всего может быть ошибка с подключением 19 окт 2018 в 8:48
  • @ПавелИгоревич вот весь код страницы: jsfiddle.net/dinarkino/pacovqb6/#&togetherjs=z4pg1Qq2ux Немного изменил с момента создания вопроса, попытался как в примере разработчиков разделить одну страницу на несколько страниц с постепенной загрузкой каждой. Однако так или иначе страницы не грузятся
    – dinarkino
    19 окт 2018 в 9:32

2 ответа 2

0

Проблема у вас в том что вы внутри атрибута data-infinite-scroll вы написали двоичных кавычек внутри других двоичных кавичек

Ваш код

data-infinite-scroll="{ "path": ".pagination__next", 
"append": ".post", "status": ".scroller-status", "hideNav": ".pagination"}"

А надо так

 data-infinite-scroll='{ "path": ".pagination__next", 
    "append": ".post", "status": ".scroller-status", "hideNav": ".pagination"}'

Также этот атрибут должен добавлятся в класс container

8
  • Насколько я понял, есть разные способы подключения. В том числе через html код, как один из вариантов, который предлагают авторы плагина (infinite-scroll.com, Initialize with HTML), я так и сделал Через jQuery пробовал, как вы предлагаете.
    – dinarkino
    19 окт 2018 в 9:21
  • @dinarkino надо конфигурацию написать к любому плагину нету того что вы проста написали html код и все заработало.Авторы предлагают использовать html + js.А у вас на сайте не было js подключений никакого кроме самого плагина.Я посмотрел может быть у вас конфиг написан в html внутри тега script и этого не было.
    – Randall
    19 окт 2018 в 9:23
  • Ок, просто у них написано так: you can initialize Infinite Scroll in HTML, without writing any JavaScript. У меня сам плагин подключён через скрипт в head. Каким образом прописать конфигурацию?
    – dinarkino
    19 окт 2018 в 9:36
  • @dinarkino да я прочитал эту часть я упустил .Проблема у вас в другом .Сейчас я обновлью ответ.
    – Randall
    19 окт 2018 в 9:42
  • @dinarkino посмотрите пожалуйста
    – Randall
    19 окт 2018 в 9:44
0

Касательно изначального вопроса, у меня было неверное понимание механизма. Недостаточно просто создавать статьи (article) внутри div. Необходимо также делить страницу на несколько отдельных страниц и через pagination оформлять ссылки на следующие страницы. Таким образом, прокурчивая до конца страницы сробатывает ссылка на загрузку следующей страницы. Рабочий код первой страницы выглядит следующим образом:

<div class="posts-feed" data-infinite-scroll='{ "path": ".pagination__next", "append": ".post", "status": ".scroller-status", "hideNav": ".pagination"}'>
   <article class="post">
      <p>...</p>
   </article>
</div>
<div class="scroller-status">
    <div class="loader-ellips infinite-scroll-request">
      <span class="loader-ellips__dot"></span>
      <span class="loader-ellips__dot"></span>
      <span class="loader-ellips__dot"></span>
      <span class="loader-ellips__dot"></span>
    </div>
    <p class="scroller-status__message infinite-scroll-last">End of content</p>
    <p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
  </div>

  <p class="pagination">
    <a class="pagination__next" href="https://dinarkino.ru/neww2">Next page</a>
  </p>

Где значимые составляющие: posts-feed, post, pagination

Далее сделав это, тем не менее, страницы не грузились. Проблема была в том, что ссылки вели на http версии страниц, а не https, на что ругался хром и блокировал загрузку. В dev tools была ошибка такого рода: Mixed Content: The page at 'dinarkino.ru/new' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'dinarkino.ru/new2'. This request has been blocked; the content must be served over HTTPS., после замены ссылок на такие, всё заработало:

href="https://dinarkino.ru/neww2"

Не знаю, хуже ли такие ссылки, чем ссылки на файлы на сервере, но пока попробую применить подобное на рабочей версии страницы.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.