Infinite scroll with jquery .load() function

Question

In a Wordpress blog page I'm trying to load content with jquery .load() function:

<div id="s1"> 1 </div>
<div id="s2"> 2 </div>
<div id="s3"> 3 </div>

<script type="text/javascript">
$("#s1").load("/2013 article.item-list");
$("#s2").load("/2013/page/2/ article.item-list");
$("#s3").load("/2013/page/3/ article.item-list");
</script>

Until here, everything works fine.
But I want the content from <div id="s2"> to load when I scroll down, like a lazy load, and so on for every next <div>. Like on mashable.com

I tried with jscroll and Infinite Scroll jQuery Plugin, but I can't figure out how to make this work.

Please someone to give me a hint! Thanks in advance.

krosullivan · Accepted Answer · 2013-03-19 23:43:09Z

1

Use the scroll event handler and then use scrollTop() and innerHeight() to figure out if your at the end of the div or not. When you are call another load.

$('#s1').on('scroll', function(){

     if($(this).scrollTop()+ $(this).innerHeight() >= $(this).scrollHeight)
                  $("#s2").load("/2013/page/2/ article.item-list");
});

answered Mar 19, 2013 at 23:43

krosullivan

1722 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

noctis · Accepted Answer · 2013-03-20 07:54:46Z

From krosullivan ideea, I made this code and works fine (demo: http://jsfiddle.net/w7X9N/272/).

But when I test this on my website, its not working. I have to set height:500px; and overflow:auto; style properties to <div="lazy"> to make it work (like in my demo).

Any ideas ?

<div id="lazy">
<div id="s1">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
</div>

<script type="text/javascript">
jQuery(
function($) {
    $("#s1").load("/2013/ article.item-list");
    $('#lazy').bind('scroll', function()
    {
        if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
        {
            $("#s2").load("/2013/page/2/ article.item-list");
            $('#lazy').bind('scroll', function()
            {
                if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
                {
                    $("#s3").load("/2013/page/3/ article.item-list");   
                }                                 
            })
        }                                 
    })
});
</script>`

Collectives™ on Stack Overflow

Infinite scroll with jquery .load() function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related