Реализация бесконечной прокрутки с помощью jquery
Я работаю над проектом, который использует jQuery Masonry и Бесконечная Прокрутка плагины для загрузки" n " количество фотографий из instagram с помощью их API. Глядя на это короткое пример Я понимаю, что мне нужно иметь перед рукой html-страницы для визуализации:
<nav id="page-nav">
<a href="pages/2.html"></a>
</nav>
проблема в том, что я действительно не знаю, сколько фотографий будет извлечено. Вот, например, как я получаю 20 фото в a время.
$(document).ready(function(){
var access_token = location.hash.split('=')[1];
if (location.hash) {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
success: function(data) {
for (var i = 0; i < 20; i++) {
$("#instafeed").append("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");
}
}
});
} else {
location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI";
}
});
Я думаю, мне понадобится механизм разбиения на страницы, но на основе упомянутого выше учебника я считаю, что сначала мне нужно будет предварительно определить html-страницы для загрузки. Так что теперь вот мои вопросы
- означает ли это этот плагин (Бесконечная Прокрутка) требуется иметь" n " количество html-файлов в Каталоге для достижения бесконечной прокрутки?
- можно ли реализовать бесконечную прокрутку с тем же плагином, если я не знаю, как у меня будет много страниц. Еще лучше, даже не создавая физические html-файлы?
- как такое пагинация реализуется? (Я. e загрузка кусков 20 фото, пока пользователь продолжает прокрутку вниз) в Интернете не так много документации, не могли бы вы предоставить короткий шаг через демо или описание?
С уважением
2 ответов
1) означает ли это, что этот плагин (Бесконечная прокрутка) требует иметь" n " количество html-файлов
абсолютно нет. Вам не нужно создавать статические html-страницы заранее, Единственное, что вам нужно, это схема URL, где последующее содержимое страницы может быть извлечено путем изменения одного номера в URL.
подумайте об этом с точки зрения плагина infinite scroll. Вы загружаете плагин JavaScript на свою страницу #1 и предоставляете ссылку на страницу#2 внутри страницы #1. Сейчас когда пользователь прокручивает страницу#1, единственной переменной, которую плагин имеет, является текущий номер страницы, например, 2, или 3 или 4 (N)
плагин должен создать URL-адрес для извлечения содержимого, когда пользователь прокручивает. Итак, как плагин это делает? Плагин смотрит на следующую структуру URL, представленную на странице#1, анализирует ее и создает "базовый путь", к которому он будет продолжать добавлять current_page_number для извлечения последующего содержимого. Это роль навигационного селектора.
Итак, скажем, я есть что-то вроде / главная/страница / 2 как следующий URL на странице#1. Плагин будет анализировать это в массив как
[/home / page/, 2]
и думаю, что base_path = "/главная/страницы/"
когда плагин пытается получить page_number 3, он просто добавит 3 к базовому пути, например base_path.присоединяйтесь (current_page_num), делая это /главная/страница/3
на стороне сервера я могу просто есть контроллер, который принимает все /дома/Страница/1 в /Home/страниц/ссылок. Вы можете просто заглянуть внутрь плагина, найти _determinePath и получить функции.
теперь вы можете увидеть проблему, а также. Проблема в том, что может быть бесконечное разнообразие структуры URL в зависимости от того, как вы делаете разбиение на страницы внутри кода и сколько переменных вам нужно. Мой способ разбиения на страницы отличается от вашего способа разбиения на страницы. То же самое касается рамок. Схема Друпал пагинация может быть отличается от Djanga и wordpress и т. д.
плагин не может справиться со всеми этими структурами URL. Учитывая следующий URL-адрес, невозможно всегда вывести "базовый путь", к которому нужно добавить current_page_number. Снова посмотрите на метод _determinepath () плагина, чтобы увидеть, с каким URL он может справиться. Он может анализировать простые структуры URL, такие как page2.html или page=2, но вы должны предоставить свою собственную реализацию, если ваша структура URL сложна или что-то, что плагин не справляется. Посмотрите также на метод pathParse ().
2) Можно ли реализовать бесконечную прокрутку с тем же плагином, если я не знаю, сколько страниц у меня будет.
опять же, нет необходимости создавать HTML-файлы. У вас есть два варианта, чтобы сигнализировать конец контента (не зная, сколько фотографий у вас есть заранее)
- когда вы достигли "условия без содержимого", вы можете вернуть HTTP 404.
- или можно вернуть пустую строку.
Это ответ на вопрос?
как он может работать с плагином
- первая страница - включить - NAV селектор-загрузить THNIGS обычным способом
- первая страница при загрузке-используйте страницу instagram и сохраните "nextURL" в своем javascript где-нибудь
- on Scroll-override _determinePath для предоставления собственного URL-адреса выборки с помощью (2) - пусть плагин извлекает этот URL
- переопределить plugin content selector-таким образом, он возвращает новые элементы для обратного вызова
- on Plugin fetch content-используйте обратный вызов внутри плагина для обновления вашей страницы
обновление РЕПО github
Я разветвил GitHub РЕПО Павла, чтобы добавить документацию для интеграции на стороне сервера PHP. Я считаю, что предположение плагина о том, что следующий URL зависит только от текущего номера страницы, слишком ограничительно. Нам нужно получить nextURL из содержимого следующей страницы.
Github РЕПО - https://github.com/rjha/infinite-scroll
запрос Pull на базовое РЕПО -https://github.com/paulirish/infinite-scroll/pull/219
мои знания javascript очень ограничены, и, возможно, вы можете сделать лучшую работу по расширению базового плагина. Однако каждая капля помогает сделать океан:)
означает ли это, что этот плагин (Бесконечная прокрутка) требует иметь "n" количество html-файлов в Каталоге для достижения бесконечной прокрутки?
да этот конкретный плагин похоже, предназначен для поддержки только статических страниц, которые в противном случае использовали бы ссылку "Следующая страница". The учебник, который вы нашли даже заявляет, что он не может обрабатывать динамически генерируемый контент с URL-параметрами, хотя я действительно не верю что.
можно ли реализовать бесконечную прокрутку с тем же плагином, если я не знаю, сколько страниц у меня будет. Еще лучше, даже не создавая физические html-файлы?
по дизайну этого плагина я бы сказал нет. Конечно, вы должны иметь возможность использовать (неизвестное) количество динамически генерируемых страниц с изображениями. Для этого необходимо, чтобы код serverside подавался из api instagram, который, похоже, не является тем, что вы хотеть.
Как такое пагинация реализуется? (Я. e загрузка кусков 20 фото, пока пользователь продолжает прокрутку вниз) в Интернете не так много документации, не могли бы вы предоставить короткий шаг через демо или описание?
есть и другие плагины бесконечной прокрутки. Демо 2 и 5 на этом вы нашли реализуйте простой "родной" (т. е. без плагина) бесконечный свиток, загружая новый контент через ajax. Демы 3 и 4 Используйте бесконечной прокрутки плагин несколько дополнительные параметры скроллинга, хотя демо-версии не включают ajax.
теперь вы можете решить, как вы хотели бы реализовать код сценарий. Сначала вы хотите получить все URL-адреса изображений из instagram, но добавляйте (и, следовательно, загружайте файлы изображений) только chunkwise. Если instagram поддерживает API подкачки, может потребоваться объединить оба процесса загрузки.
Это можно сделать с кодом, как в демонстрациях от 2 до 5 - когда прокрутка достигает конца страницы, инициируйте свои запросы на загрузку изображений. После того, как это произошло, позвоните Масонство-это appended метод на новых элементах img (или instaframe divs, как в вашем примере).