Implementing infinite scroll for Giphy API with jQuery and PHP

[ethant]

I need help creating endless scrolling for GIFs using the Giphy API, similar to what you see on Facebook when adding media to posts. My current setup only loads 25 GIFs and stops there, even though I want it to keep loading more as the user scrolls down. I know the API supports pagination with limit and offset parameters, but I can’t get the continuous loading to work properly. Here’s my current implementation:

$(document).ready(function() {
    let currentPage = 0;
    let itemsPerPage = 25;
    let isLoading = false;
    
    $('#gifContainer').on('scroll', function() {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            loadMoreGifs();
        }
    });
    
    function searchGifs(query) {
        if (!query) return;
        
        let apiOffset = itemsPerPage * currentPage;
        
        if (isLoading) return;
        isLoading = true;
        
        $.get({
            url: 'https://api.giphy.com/v1/gifs/search',
            data: {
                q: query,
                api_key: 'your_api_key',
                limit: itemsPerPage,
                offset: apiOffset
            }
        }).done(function(response) {
            if (response.meta.status === 200 && response.data.length) {
                $('#gifContainer').empty();
                
                response.data.forEach(function(gif) {
                    let imgElement = $('<img>').attr({
                        src: gif.images.preview_gif.url,
                        'data-full': gif.images.original.url,
                        alt: 'animated gif'
                    });
                    $('#gifContainer').append(imgElement);
                });
                
                currentPage++;
            }
            isLoading = false;
        });
    }
});

The scrolling detection works but it doesn’t trigger additional API calls. What am I missing to make this work like an infinite scroll?

[miar]

Your scroll detection has a major flaw - you’re not storing the search query anywhere. When the scroll event fires and tries loading more content, it has no idea what to search for. Your loadMoreGifs() function references a query parameter that doesn’t exist.

I hit this exact same issue building a similar interface last year. You need to track the current search term globally and split your initial search from infinite scroll loading. Just create let currentQuery = ''; at the top level and update it whenever a new search starts.

Your currentPage counter needs to reset to 0 on fresh searches too, or you’ll skip results. Right now if someone searches “cats” then immediately searches “dogs”, the dogs search starts from whatever offset cats left off at.

Watch out for Giphy API rate limits too. They’re pretty strict depending on your key type, so consider debouncing scroll events or adding delays between requests.

[alexj]

you might be clearing your gifs with $('#gifContainer').empty() in the searchGifs fn. for infinite scroll, you want to add new gifs instead of removing the old ones. try removing that empty() line, and it should work!

[jackw]

The problem’s in your searchGifs function - you’re calling it from the scroll event but also clearing the container every time. Here’s what’s going wrong:

Your scroll handler calls loadMoreGifs() but that function doesn’t exist. Either rename searchGifs to loadMoreGifs or make a separate function.

Also, like alexj said, ditch that .empty() call. For infinite scroll, you want to append new content, not wipe everything.

Quick fix for your scroll handler:

function loadMoreGifs() {
    if (currentQuery) {
        searchGifs(currentQuery);
    }
}

Update your searchGifs to append instead of replace:

response.data.forEach(function(gif) {
    let imgElement = $('<img>').attr({
        src: gif.images.preview_gif.url,
        'data-full': gif.images.original.url,
        alt: 'animated gif'
    });
    $('#gifContainer').append(imgElement); // This stays the same
});

You’ll need a variable to store the current search query so the scroll handler knows what to search for.

I hit similar issues building a media picker for our internal tools. The Giphy API’s pretty straightforward once you nail the pagination flow.

Giphy API Tutorial