How can I lazy load non-image content in jQuery?

Question

I want to lazy-load the results of my Youtube API search, so that as the user scrolls down, Youtube players are being added to the page. It seems that the lazy loading plugins are focused on images, but what I will be loading is just HTML, because I'm using iFrames to load the Youtube players (as per the new Youtube embed style). How can I do this in jQuery? Thanks for reading.

Answer 1

If I understand you correctly you need something like:

$( "body").scroll( function() {
   $( "#youtubeDiv").load( "youtube.html");
});

Instead of load you can append html fragment.

Answer 2

You can use the .scroll() and .ScrollTop() functions to detect if you are at the current bottom of the page/scroll. if so, append the next set of iframes to the main element. This also means you need to keep track of the already loaded elements and the available (to be loaded) elements. The latter should be the result of your search.