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