Не подключается Infinite Scroll

165

24 февраля 2019, 15:30

Несколько часов пытался внедрить 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>

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

Answer 1

Проблема у вас в том что вы внутри атрибута 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

Answer 2

Касательно изначального вопроса, у меня было неверное понимание механизма. Недостаточно просто создавать статьи (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., после замены ссылок на такие, всё заработало: