Seeking advice on improving the performance of my code that pulls images from Instagram using the Instagram Graph API. I've encountered slow performance when using JavaScript, and even worse when using PHP. As a beginner in this area, any guidance or tips would be greatly appreciated.
Below is the current code snippet:
$.getJSON(instagram_url_1, function(data) {
instagram_array_1 = data['data'];
instagram_next = data['paging'];
instagram_next = instagram_next['next'];
for (var image_count = 0; image_count < 25; image_count++) {
image_data = instagram_array_1[image_count];
image_data = image_data['id'];
image_link = 'https://graph.facebook.com/' + image_data + '?fields=media_url&access_token=' + access_token;
image_array[image_count] = image_link;
};
$.getJSON(instagram_next, function(data) {
instagram_array_2 = data['data'];
for (image_count = 0; image_count < 25; image_count++) {
image_data = instagram_array_2[image_count];
image_data = image_data['id'];
image_link = 'https://graph.facebook.com/' + image_data + '?fields=media_url&access_token=' + access_token;
image_array[image_count + 25] = image_link;
};
console.log(image_array);
for (var image_count = 0; image_count < 40; image_count++) {
image_link_array = image_array[image_count];
$.getJSON(image_link_array, function(data) {
image_link = data['media_url'];
image_html = '<img class="instagram-images" src=' + image_link + ' />';
$('#instagram-body').append(image_html);
});
};
});
});
The website loading time could use some improvement to enhance user experience. Any suggestions are welcome! Thanks in advance!