javascript - How to load and stop Ajax based vertical scroll function + gif image loader -
i have not been able achieve this. problem function works once , stops. missing loop here?
i have tried move else { }
block everywhere, doesn't help. have tried put condition else if (data=='')
didn't helped.
if move function
if($(window).scrolltop() + $(window).height() > $("#load_data").height() && action == 'inactive') {
outside of if(data !=='')
my scroll function , gif image doesn't stops after last raw been fetched database.
any appreciated. thanks!
<script> var limit = 20; var start = 0; var action = 'inactive'; var timeoutid; function load_city_data(limit, start) { $.ajax({ url:"ps_load_data.php", method:"post", data:{limit:limit, start:start}, cache:false, success:function(data) { $('#load_data').append(data); if(data !== '') { $('#imgloader').html('<img class="animated-gif" src="img/ajax-loader.gif">'); action = "inactive"; $(window).scroll(function(){ if($(window).scrolltop() + $(window).height() > $("#load_data").height() && action == 'inactive') { action = 'active'; start = start + limit; timeoutid = settimeout(function(){ load_city_data(limit, start); }, 1000); } else { $('#load_data_message').html('<div class="reached">you have reached @ end of listings</div>'); action = 'active'; $(window).off('scroll'); cleartimeout(timeoutid); $('img[src="img/ajax-loader.gif"]').remove(); } }); } } }); } $(document).ready(function(){ if(action == 'inactive') { action = 'active'; load_city_data(limit, start); } }); </script>
Comments
Post a Comment