Я использую jQuery и Flickr API для возврата объекта json, содержащего много фотографий из фотопотока пользователя.
Я хотел бы перебрать полученный объект, чтобы сначала показать 40 фотографий, а затем кнопку «загрузить еще». При каждом нажатии этой кнопки к существующему списку фотографий будет добавляться следующая партия из 40 фотографий. Как только в объекте больше нет элементов, кнопка снова становится гиперссылкой на профиль пользователя Flickr.
На данный момент у меня есть рабочий код, отображающий первые 40 фотографий. Но когда нажимается кнопка «загрузить еще», я добавляю все оставшиеся элементы в HTML. Это потому, что я не смог найти способ создать поведение, описанное выше.
Возможно, есть более эффективный подход, который я тоже упустил.
Вот мой существующий код. Любые дополнительные комментарии или улучшения будут приветствоваться.
$(function () {
myApp.uri = myApp.flickrUrl + '&per_page=' + myApp.maxNum + '&api_key=' + myApp.flickrApiKey + '&user_id=' + myApp.flickrUserId;
myApp.getPhotos(myApp.uri, myApp.callback);
});
var myApp = {
flickrApiKey : 'xxxx',
flickrUserId : 'xxxx',
flickrUrl : 'http://api.flickr.com/services/rest/?format=json&extras=url_t&method=flickr.people.getPublicPhotos',
callback : 'jsonFlickrApi',
minNum : 40,
maxNum : 500
};
myApp.getPhotos = function (u, c) {
var jxhr = $.ajax({
dataType : 'jsonp',
url : u,
jsonpCallback : c,
timeout : 5000
})
.success(function (data, status) {
var photosContainer = $('#photos');
photosContainer.prepend('<ul/>');
var photosList = $('#photos ul');
// while there are more photos to load, the default link text
// is replaced with a string stored in a data-* attribute
var moreLink = $('#more');
var moreLinkText = moreLink.text();
var moreLinkTextJs = moreLink.attr('data-text-js');
moreLink
.attr('data-text-nojs', moreLinkText)
.text(moreLinkTextJs)
.insertAfter(photosContainer);
// initially populate the Photo List with the first 40 photos
$.each(data.photos.photo, function (i, item){
if (i < myApp.minNum) {
var photoEl = '<li><a href="' + 'http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank"><img src="' + item.url_s + '" alt="' + item.title + '"></a></li>';
$(photoEl).appendTo(photosList);
}
});
// click on "More" link loads in all remaining photos.
// would like this to load the next 40 in the object
// each click until there are no items left...at which point unbind
moreLink.live('click', function (e) {
e.preventDefault();
$.each(data.photos.photo, function (i, item){
if (i >= myApp.minNum) {
var photoEl = '<li><a href="' + 'http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank"><img src="' + item.url_s + '" alt="' + item.title + '"></a></li>';
$(photoEl).appendTo(photosList);
}
});
// unbind events and revert the link text
moreLink.text(moreLinkText).blur().die();
});
})
.error(function (status) {
});
};