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

我修改了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);
        });      
     });  
   });  

$（文档）.imagesLoaded（函数（）{
$（文档）.ready（新函数（）{
//准备布局选项。
变量选项={
autoResize:true，//这将在调整浏览器窗口大小时自动更新布局。
容器：$（'#main'），//可选，用于一些额外的CSS样式
偏移量：10，//可选，网格项之间的距离
itemWidth:320//可选，网格项的宽度
};
//获取对网格项的引用。
变量处理程序=$（'#tiles li'）；
//调用布局函数。
handler.wookmark（选项）；
//当滚动到底部时，添加更多的平铺。
var int=10；
函数onScroll（事件）{
//检查我们是否在broser窗口底部边缘的100像素范围内。
var closeToBottom=（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-100）；
如果（接近底部）{
//获取接下来的10个项目；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
//document.getElementById（“tiles”）.innerHTML=xmlhttp.responseText；
$（'#tiles'）.append（innerHTML=xmlhttp.responseText）；
int=int+10；
//清除以前的布局处理程序。
if（handler）handler.wookmarkClear（）；
//创建一个新的布局处理程序。
handler=$（'#tiles li'）；
handler.wookmark（选项）；
}
}
$扩展({
getUrlVars:function（）{
var vars=[]，散列；
var hashes=window.location.href.slice（window.location.href.indexOf（'？'）+1）.split（'&'）；
for（var i=0；i

---

提前感谢。

我建议您使用jquery ajax函数，如getJson、getAjax。

最后我忘了尝试最简单的方法，将handler.wookmark包装在imagesLoaded中：

$（文档）.imagesLoaded（函数（）{
handler.wookmark（选项）；
});

完整代码：

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


        });      
     });

   });

$（文档）.imagesLoaded（函数（）{
$（文档）.ready（新函数（）{
//准备布局选项。
变量选项={
autoResize:true，//这将在调整浏览器窗口大小时自动更新布局。
容器：$（'#main'），//可选，用于一些额外的CSS样式
偏移量：10，//可选，网格项之间的距离
itemWidth:320//可选，网格项的宽度
};
//获取对网格项的引用。
变量处理程序=$（'#tiles li'）；
//调用布局函数。
handler.wookmark（选项）；
//当滚动到底部时，添加更多的平铺。
var int=10；
函数onScroll（事件）{
//检查我们是否在broser窗口底部边缘的100像素范围内。
var closeToBottom=（$（窗口）.scrollTop（）+$（窗口）.height（）>$（文档）.height（）-100）；
如果（接近底部）{
//获取接下来的10个项目；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
//document.getElementById（“tiles”）.innerHTML=xmlhttp.responseText；
$（'#tiles'）.append（innerHTML=xmlhttp.responseText）；
int=int+10；