Infinite Scroll - автоматическая загрузка следующего определенного количества сообщений в фоновом режиме

Я разрабатываю сайт wordpress, используя бесконечный свиток. Он работает нормально. Но мне нужно сделать некоторые изменения для заметно более быстрой загрузки. Когда сайт полностью загружен, я хочу загрузить несколько сообщений для автоматической загрузки в фоновом режиме (пользователь не будет знать, что загружается больше содержимого). Когда они достигают нижней части страницы (или нажимают кнопку "Загрузка большего количества сообщений"), она показывает те предварительно загруженные сообщения, а затем система снова загружает несколько записей в фоновом режиме и т.д. Таким образом, пользователь будет видеть, как быстро загружается контент, когда они достигают нижней части страницы каждый раз.

Любая идея, как этого добиться, пожалуйста?

1 ответ

Примечание. Не определенно о структуре html, css, существующих js документа, не отображается html присутствующий в исходном сообщении.

html ниже адаптирован из Infinite Scroll Without External Content, возможно, аналогичный вопрос?

Попробуйте это (шаблон)

HTML

<!-- Visible to users -->
<article>Pretend this is a preview (1) for an article on a blog</article>
<article>Pretend this is a preview (2) for an article on a blog</article>
<article>Pretend this is a preview (3) for an article on a blog</article>
<!-- End of Page -->
<!-- Infinite Scroll Load (Was Hidden Now Visible) -->
<article>Pretend this is a preview (4) for an article on a blog</article>
<article>Pretend this is a preview (5) for an article on a blog</article>
<article>Pretend this is a preview (6) for an article on a blog</article>
<button id="articles">Click to view more articles</button>
<!-- End of Page -->

js (обновлено)

$(function () {
 $("body").css("height", $(document).height() + 1)
 // '.load()' additional articles
 .find("article").each(function (i, el) {
 $(el).not(":nth-last-of-type(n+4)").hide()
 .filter(":nth-of-type(4)").on("click.y", function () {
 $("body").animate({
 scrollTop: "0px"
 }, 1000)
 });
 });
 $(document).on("scroll.article", {
 "scrolled": false
 }, function (e) {
 if (!e.data.scrolled) {
 var el = $("article:nth-of-type(n+4)");
 $(el).show(1000);
 e.data.scrolled = true;
 };
 if (e.data.scrolled) {
 $(el).on("click", function (e) {
 $(e.target).hide(1000);
 });
 };
 if ($("article:nth-of-type(n+4)").css("display") === "none") {
 e.data.scrolled = false;
 };
 return false
 });

 $("#articles").on("click", $(document), function (e) {
 // '.load()' additional articles
 $(e.target).trigger("scroll.article").scroll()
 })
});

jsfiddle http://jsfiddle.net/guest271314/bG5N8/

licensed under cc by-sa 3.0 with attribution.