Question

I adapted this script from the wookmark plugin to load more items from a db when the users scrolls to the bottom of the page.

Initially it pre loads the images and then creates the layout, however when the users scrolls to the bottom, the new items are loaded thru ajax but the images all overlap each other.

I’m using the imagesloaded jquery plugin to get the images to display correctly when the page loads the first time but i cant get it to work when new items are added when the users scrolls to the bottom.

here’s my code:

  $(document).imagesLoaded(function() {
     $(document).ready(new function() {

       // Prepare layout options.
       var options = {
         autoResize: true, // This will auto-update the layout when the browser window is resized.
         container: $('#main'), // Optional, used for some extra CSS styling
         offset: 10, // Optional, the distance between grid items
         itemWidth: 320 // Optional, the width of a grid item
       };

       // Get a reference to your grid items.
       var handler = $('#tiles li');

       // Call the layout function.
       handler.wookmark(options);


       // When scrolled all the way to the bottom, add more tiles.
        var int = 10;

        function onScroll(event) {
          // Check if we're within 100 pixels of the bottom edge of the broser window.
          var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);

          if(closeToBottom) {

             // GET THE 10 NEXT ITEMS;
              if (window.XMLHttpRequest)
                 {// code for IE7+, Firefox, Chrome, Opera, Safari
                 xmlhttp=new XMLHttpRequest();
                 }
               else
                 {// code for IE6, IE5
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }
               xmlhttp.onreadystatechange=function()
                 {
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                   {
                   //document.getElementById("tiles").innerHTML=xmlhttp.responseText;



                         $('#tiles').append(innerHTML=xmlhttp.responseText);
                         int = int+10;
                         // Clear our previous layout handler.
                         if(handler) handler.wookmarkClear();

                         // Create a new layout handler.
                         handler = $('#tiles li');
                         handler.wookmark(options);

                   }
                 }

               $.extend({
                    getUrlVars: function(){
                      var vars = [], hash;
                      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                      for(var i = 0; i < hashes.length; i++)
                      {
                        hash = hashes[i].split('=');
                        vars.push(hash[0]);
                        vars[hash[0]] = hash[1];
                      }
                      return vars;
                    },
                    getUrlVar: function(name){
                      return $.getUrlVars()[name];
                    }
                  });

                  var request = $.getUrlVar('item');

                  if(request!=null){
                    var allR = "?int="+int+"&item="+request;
                  } else {
                    var allR = "?int="+int;
                  }

               xmlhttp.open("GET","tiles.php"+allR,true);
               xmlhttp.send();
          }
        };

        $(document).ready(new function() {
          // Capture scroll event.
          $(document).bind('scroll', onScroll);

          // Call the layout function.
          handler = $('#tiles li');
          handler.wookmark(options);
        });      
     });  
   });  

Thanks in advance.

Answer 1

In the end i forgot to try the simplest thing, wrap the handler.wookmark in imagesLoaded:
$(document).imagesLoaded(function() {
handler.wookmark(options);
});

Full code:

$(document).imagesLoaded(function() {
     $(document).ready(new function() {

       // Prepare layout options.
       var options = {
         autoResize: true, // This will auto-update the layout when the browser window is resized.
         container: $('#main'), // Optional, used for some extra CSS styling
         offset: 10, // Optional, the distance between grid items
         itemWidth: 320 // Optional, the width of a grid item
       };

       // Get a reference to your grid items.
       var handler = $('#tiles li');

       // Call the layout function.
       handler.wookmark(options);

       // When scrolled all the way to the bottom, add more tiles.
        var int = 10;

        function onScroll(event) {
          // Check if we're within 100 pixels of the bottom edge of the broser window.
          var closeToBottom = ($(window).scrollTop() + $(window).height() >     $(document).height() - 100);

          if(closeToBottom) {


             // GET THE 10 NEXT ITEMS;
              if (window.XMLHttpRequest)
                 {// code for IE7+, Firefox, Chrome, Opera, Safari
                 xmlhttp=new XMLHttpRequest();
                 }
               else
                 {// code for IE6, IE5
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }
               xmlhttp.onreadystatechange=function()
                 {
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                   {
                   //document.getElementById("tiles").innerHTML=xmlhttp.responseText;


                         $('#tiles').append(innerHTML=xmlhttp.responseText);



                         int = int+10;
                         // Clear our previous layout handler.
                         if(handler) handler.wookmarkClear();

                         // Create a new layout handler.
                         handler = $('#tiles li');

                         $(document).imagesLoaded(function() {
                         handler.wookmark(options);
                       });



                         $(function() {
                            // Select all links whose attribute rel starts with lightbox
                            $('a[rel^=lightbox]').lightBox();
                         });

                         var scripts = domElement.getElementsByTagName("script");
                           for (var i = 0; i < scripts; i ++) {
                               eval(scripts[i].text);
                           }



                   }



            } 
               $.extend({
                    getUrlVars: function(){
                      var vars = [], hash;
                      var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                      for(var i = 0; i < hashes.length; i++)
                      {
                        hash = hashes[i].split('=');
                        vars.push(hash[0]);
                        vars[hash[0]] = hash[1];
                      }
                      return vars;
                    },
                    getUrlVar: function(name){
                      return $.getUrlVars()[name];
                    }
                  });

                  var request = $.getUrlVar('item');

                  if(request!=null){
                    var allR = "?int="+int+"&item="+request;
                  } else {
                    var allR = "?int="+int;
                  }

if(end==0){
               xmlhttp.open("GET","tiles.php"+allR,true);
               xmlhttp.send();
             }

             }

        };

        $(document).ready(new function() {
          // Capture scroll event.
          $(document).bind('scroll', onScroll);

          // Call the layout function.
          handler = $('#tiles li');
          handler.wookmark(options);


        });      
     });

   });