ajax读取图片后排列问题（先加载完图片再排列）

网上找了个瀑布流的图片排列插件。从数据库读取图片路径后显示时出现了位置重叠问题。

     $.ajax({
         type: "POST",
         url: "index.aspx",
         data: { 'action': 'SelectImage'},
         dataType: "json",
         success: function (result) {
             var imgpanel = $("#imgitem");
             var index = 1;
             for (var i in result)
             {
                 imgpanel.append("<div class ='item'><img src ='" + result[i] + "'/></div>");
             }
             PBL('main', 'item');//瀑布流排序
         }, error: function (x, e) {
             alert("error:"+ x.responseText);
         }
     });

在执行瀑布流排序的时候一些图片还未加载完成，导致图片重叠在了一起。

通过调用img中的onload方法判断图片是否加载完成，加载完成再进行瀑布流排列

修改如下：

     $.ajax({
         type: "POST",
         url: "index.aspx",
         data: { 'action': 'SelectImage'},
         dataType: "json",
         success: function (result) {
             var imgpanel = $("#imgitem");
             var index = 1;
             for (var i in result)
             {
                 var img = new Image();
                 img.src = result[i];
                 imgpanel.append("<div class ='item'><img src ='" + result[i] + "'/></div>");
                 img.onload = function () {
                     if (index == result.length) {
                         PBL('main', 'item');//瀑布流排序
                     }
                     index++;
                 }
             }
         }, error: function (x, e) {
             alert("error:"+ x.responseText);
         }
     });