So, many of you may have heard about the amazing jquery plug-in called 'Infinite-Scroll'. If you haven't you need to check it out here. Anyway, when I was trying to incorporate this plug-in to my site, it was very easy; however, I could not for the life of me figure out how come the loading image and loading text I had specified in the jQuery options were not being executed. Well, the reason is that the documentation on the site has not been updated.

The Loading functionality is supposed to be passed as a separate array. So, instead of passing this code through the infinite scroll plug-in :

loadingImg   : "/img/loading.gif",          
                 // loading image.
                 // default: "http://www.infinite-scroll.com/loading.gif"
 
loadingText  : "Loading new posts...",      
                 // text accompanying loading image
                 // default: "<em>Loading the next set of posts...</em>"

You'll want to add the following instead:

loading: {
    img: "/img/loading.gif",
    msgText: "Loading new posts..."
},

And now, your custom image and message text will be displayed :)

You can checkout the original Github post issue here: https://github.com/paulirish/infinite-scroll/issues/72#issuecomment-1676802