ajax - Infinite Scrolling with wookmark plugins scrolling -

with ref. above subject, using wookmark plugin scroll our home page data dynamically….i have studied tutorial provided on wookmark , m using exact script provided wookmark , working fine shorts of not 100% working. things stucks when reaches @ bottom of window press arrow key, loads products again , happens randomly time scrolls , time stucks , if presses arrow key starts working again.

kindly me out m going wrong. kindly provide me easy working script same.

i m using following code :

  (function ($) {       $('#main').imagesloaded(function () {           var handler = null;            // prepare layout options.           var options = {               itemwidth: 200, // optional min width of grid item               autoresize: true, // auto-update layout when browser window resized.               container: $('#main'), // optional, used css styling               offset: 20, // optional, distance between grid items               outeroffset: 20, // optional distance grid parent               flexiblewidth: 300 // optional, maximum width of grid item           };            function applylayout() {               $('#main').imagesloaded(function () {                   // destroy old handler                   if (handler.wookmarkinstance) {                       handler.wookmarkinstance.clear();                   }                    // create new layout handler.                   handler = $('#display li');                   handler.wookmark(options);               });               handler.wookmark(options);           }            /**           * when scrolled way bottom, add more tiles.           */           function onscroll(event) {               // check if we're within 100 pixels of bottom edge of broser window.               var winheight = window.innerheight ? window.innerheight : $(window).height(); // iphone fix               //var closetobottom = ($(window).scrolltop() >= $((document)).height() - $((window)).height() - $("#footer").height() - 500); //(($(window).scrolltop() - 100)); //+ "%"               var closetobottom = ($(window).scrolltop() + winheight > $(document).height() - 100);                if (closetobottom) {                   // first items grid, clone them, , add them bottom of grid.                   var items = $('#display li'),                   firstten = items.slice(0, 10);                   //$('#display').append(firstten.clone());                    applylayout();               }           };            // capture scroll event.           $(window).bind('scroll', onscroll);            // call layout function.           handler = $('#display li');           handler.wookmark(options);       });        $(window).load(function () {           handler.wookmark(options);       });   })(jquery); 

if commented out

//$('#display').append(firstten.clone()); 

then new items not loaded on end of list. need uncomment line new items.

in real life instead of

var items = $('#display li'), firstten = items.slice(0, 10); $('#display').append(firstten.clone()); 

you need code load new items.

also think might make sense change > >=

var closetobottom = ($(window).scrolltop() + winheight >= $(document).height() - 100); 

to load new items if scroll position more or equal height of window - 100, 100 value - try 200 or more see if work better you.