首页 > 代码库 > ajax读取图片后排列问题（先加载完图片再排列）
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 =http://www.mamicode.com/‘" + 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 =http://www.mamicode.com/ result[i];13 imgpanel.append("<div class =‘item‘><img src =http://www.mamicode.com/‘" + 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 });
ajax读取图片后排列问题（先加载完图片再排列）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。