jquery infinite scroll
<p>im trying toimplememt infint scroll, i see there are others who have the same problem , where when the scroll reaches bottom , the post is fired multiple times, i have implemted the code dito from the answer provided , but my post still fires a few times. </p>

<pre><code>&lt;script&gt;
function test($container)
{ 

$(window).data('ajaxready', true).scroll(function(e) {
    if ($(window).data('ajaxready') == false) return;

    if ($(window).scrollTop() &gt;= ($(document).height() - $(window).height())) {

         var start  = $("#offset").val(); 
         var dataStringCom = {start:start};     

        $('div#loadmoreajaxloader').show(); 
        $(window).data('ajaxready', false);
        $.ajax({
        type: "POST",
        url: "/recipes/all_loader/",
        data: dataStringCom,
        cache: false,
        success: function(data){
        if(data)
            {

                 var $data = $(data);               
                 $data.imagesLoaded(function(){
                  // show elems now they're ready
                  $container.append($data).masonry('appended', $data, true)
                  //$container.masonry( 'reload', $boxes );
                });       
                $('div#loadmoreajaxloader').hide();             
                var offset;
                 offset  = $("#offset").val();
                 offset = parseInt(offset) + 20;
                 $("#offset").val(offset);                       
            }
            else
            {

                $('div#loadmoreajaxloader').hide();
                $('div#loadmoreajaxloader').html('&lt;center&gt;No more posts to show.&lt;/center&gt;');
            }
                $(window).data('ajaxready', true);
            }
        });
    }
});

}//end of function
&lt;/script&gt;
</code></pre>
