jquery lazy load content in div

Question

I want to load the content in div.I got many jquery scoll plugins but all are they for whole page load.I want to load content in existing div when scroll reaches at bottom of div.Can anyone help me ?

Answer 1

You can do something like this using JQuery and Ajax:

var loading = false;//to prevent duplicate

function loadNewContent(){       
    $.ajax({
        type:'GET',
        url: url_to_new_content    
        success:function(data){
            if(data != ""){
                loading = false;
                $("#div-to-update").html(data);
            }
        }
    });
}

//scroll DIV's Bottom 
$('#div-to-update').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        if(!loading){
            loading = true;
            loadNewContent();//call function to load content when scroll reachs DIV bottom                
        }   
    }
})


//scroll to PAGE's bottom
var winTop = $(window).scrollTop();
var docHeight = $(document).height();
var winHeight = $(window).height();
if  ((winTop / (docHeight - winHeight)) > 0.95) {       
    if(!loading){
        loading = true;
        loadNewContent();//call function to load content when scroll reachs PAGE bottom                
    }       
}

FIDDLE

Answer 2

You can do something like this using JQuery and this lazyload plugin.

Your div:

<div data-src="transparent.png" url="http://stackoverflow.com"></div>

Use beforeLoad callback:

jQuery(function($) {
    $("div[url]").lazy({
        beforeLoad: function (element) {
            element.load(element.attr("url"));
        }
    });
});