如何在创建布局之前使 wookmark 插件预加载图像

Question

我从 wookmark 插件改编了这个脚本，以便在用户滚动到页面底部时从数据库加载更多项目。

最初它会预加载图像，然后创建布局，但是当用户滚动到底部时，新项目会通过 ajax 加载但图像都相互重叠。

我正在使用 imagesloaded jquery 插件来让图像在第一次加载页面时正确显示，但是当用户滚动到底部时添加新项目时，我无法让它工作。

这是我的代码：

  $(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);
        });      
     });  
   });  

提前致谢。

Answer 1

最后我忘了尝试最简单的方法，将 handler.wookmark 包装在 imagesLoaded 中： $(document).imagesLoaded(function() { handler.wookmark(options); });

完整代码：

$(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);


        });      
     });

   });

Answer 2

我建议你使用getJson、getAjax之类的jquery ajax函数。