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

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

 1     $.ajax({
 2         type: "POST",
 3         url: "index.aspx",
 4         data: { 'action': 'SelectImage'},
 5         dataType: "json",
 6         success: function (result) {
 7             var imgpanel = $("#imgitem");
 8             var index = 1;
 9             for (var i in result)
10             {
11                 imgpanel.append("<div class ='item'><img src ='" + result[i] + "'/></div>");
12             }
13             PBL('main', 'item');//瀑布流排序
14         }, error: function (x, e) {
15             alert("error:"+ x.responseText);
16         }
17     });

 

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

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

修改如下：

 1     $.ajax({
 2         type: "POST",
 3         url: "index.aspx",
 4         data: { 'action': 'SelectImage'},
 5         dataType: "json",
 6         success: function (result) {
 7             var imgpanel = $("#imgitem");
 8             var index = 1;
 9             for (var i in result)
10             {
11                 var img = new Image();
12                 img.src = result[i];
13                 imgpanel.append("<div class ='item'><img src ='" + result[i] + "'/></div>");
14                 img.onload = function () {
15                     if (index == result.length) {
16                         PBL('main', 'item');//瀑布流排序
17                     }
18                     index++;
19                 }
20             }
21         }, error: function (x, e) {
22             alert("error:"+ x.responseText);
23         }
24     });

 

转载于:https://www.cnblogs.com/bakuhert/p/5902091.html