javascript - Instagram grabbing photos based on hashtag
765
setInterval(function () {
$("ul").empty();
var tag = $("#add").data('tag'), maxid = $("#add").data('maxid');
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
tag: tag,
max_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
$('ul#photos').append('<li><img src="' + src + '"></li>');
});
// Store new maxid
$('#add').data('maxid', data.next_id);
}
});
}, 20000);
I'm trying to load 1 picture at a time in an interval of 20s. However for a certain hashtag with only 27 photos. It loads well until the last 20, which loads all at one even though I'm limiting it to just one. It's always the last 20.
How do I load it 1 at a time for the last 20?
Answer
Solution:
It's difficult to say exactly without looking at your PHP script, but what I can say is that you are iterating over an array of returned photos (using $.each) and appending each photo from the array of returned photos to your DOM.
So one thing would be, don't iterate over the array of photos and just access the first index of the array of photos (data.images[0]). If you can't figure out why your server side code is returning more photos than you want (which you should investigate), just grab all the photos and set a timeout that adds one of the returned photos every 20s after you've made the network request for all of them. This would mean less network requests as well, so maybe it would be a good solution for you.
If you want to make up to 20 ajax requests (maybe not an optimal solution), and you are getting more images back than you want, then your PHP needs to be investigated and right now you're only showing us the client side code.