1

Здравствуйте. Я на страницу выкладываю ссылки разных музыкальных альбомов (ссылка пробной страницы), но возникает проблема, чем больше будет ссылок тем дольше и тяжелее будет грузится страница. Можно ли сделать так, чтоб информация на странице возникала пошагово, к примеру, при открытии страницы показывалось 5 альбомов, нажимаю на кнопку - следующие 5 и т.д.?

2 ответа 2

1

В двух словах это делается так:

$(window).scroll(function(){
   if  ($(window).scrollTop() == $(document).height() - $(window).height()){
      //Здесь добавляете вашу подгрузку.
   }
});

Этот код будет срабатывать каждый раз, когда вы будете доходить до конца страницы. По достижении его грузите, например еще 20 записей.

Только учтите, что первая порция данных должна быть достаточно большой, что-бы появлялся вертикальный скролл.

Так же как рекомендация, сделать такое условие:

$(window).scrollTop() > $(document).height() - $(window).height() - 100

Тогда подгрузка будет происходить не по достижении наименьшей записи, а за 100px до нее, и в итоге у вас не будет эффекта "подергивания" при быстром соединении.

3
  • А куда нужно добавить код? в functions.php?
    – zim
    Commented 9 апр. 2015 в 19:30
  • Нет, это добавляется в код HTML странички, после всего контента. В место: //Здесь добавляете ваш код - добавляете вызов: $.ajax({ url: '/ajax/example.html', //Ваш адрес для подгрузки || dataType : "json", // тип загружаемых данных (можно указать text и просто грузить уже сгенерированный html блок) || success: function (data, textStatus) { || //Здесь просто добавляете data к вашему нижнему блоку через innerHTML например... || } });
    – Lexd5
    Commented 10 апр. 2015 в 4:38
  • У меня, уровень в языках программирования практически нулевой, не могли бы вы подсказать где я могу найти контент, который вписываю на страницу WordPress? Я копирую код с сайта deezer и вставляю его на страницу WordPress. Но в какой файл прописывается вставленный код я не знаю. Смотрю в файле /wp-content/themes/mystile/content.php - ничего подобного, что я вставлял на страницу, нет. Смотрю в файле /wp-content/themes/mystile/page.php - тоже нет
    – zim
    Commented 10 апр. 2015 в 6:49
0

Можно даже без нажимания кнопок — просто после прокручивания страницы до конца. Называется Infinity Scroll. Например вот учебное пособие:

http://code.tutsplus.com/tutorials/how-to-create-infinite-scroll-pagination--wp-24873

2
  • Интересный урок, смотрю что уровень для новичка, постараюсь разобраться. Спасибо!
    – zim
    Commented 9 апр. 2015 в 19:09
  • Я заметил что в этом уроке в коде встречается "posts". Я могу этот урок использовать для загрузки информации, которая выложена на одной странице, (не посты) только всплывать она будет при скролинге?
    – zim
    Commented 9 апр. 2015 в 20:09

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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