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

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

ajax读取图片后排列问题(先加载完图片再排列)的更多相关文章

  1. 图片_ _Android有效解决加载大图片时内存溢出的问题 2

    Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或 setImageResource或 Bit ...

  2. 使用jquery插件实现图片延迟加载技术(懒加载)

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  3. Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片

    Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...

  4. Android圆形头像,拍照后“无法加载此图片”的问题解决(适配Android7.0)

    Feature: 点击选择拍照或者打开相册,选取图片进行裁剪最后设置为圆形头像. Problem: 拍好照片,点击裁剪,弹Toast"无法加载此图片". Solution: 在裁剪 ...

  5. 网页图片很多时,加载完后再加载图片(defer:延迟加载)

    图片影响页面加载速度,可以先加载完页面,再去加载图片. defer:告诉浏览器,这里面的js代码不影响网页脚本解析,可以解析完html脚本再执行这段js代码(个人理解). 网页代码:<img s ...

  6. Android开发中如何解决加载大图片时内存溢出的问题

    Android开发中如何解决加载大图片时内存溢出的问题    在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...

  7. 【Android Developers Training】 56. 更效率地加载大图片

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  8. Android学习笔记_51_转android 加载大图片防止内存溢出

    首先来还原一下堆内存溢出的错误.首先在SD卡上放一张照片,分辨率为(3776 X 2520),大小为3.88MB,是我自己用相机拍的一张照片.应用的布局很简单,一个Button一个ImageView, ...

  9. 我的Android进阶之旅------>Android疯狂连连看游戏的实现之加载界面图片和实现游戏Activity(四)

    正如在<我的Android进阶之旅------>Android疯狂连连看游戏的实现之状态数据模型(三)>一文中看到的,在AbstractBoard的代码中,当程序需要创建N个Piec ...

随机推荐

  1. 修改jenkins启动的默认用户

    # 背景 通过yum命令安装的jenkins,通过service jenkins去启动jenkins的话,默认的用户是jenkins,但jenkins这个用户是无法通过su切换过去的 ,在某些环节可能 ...

  2. electron-vue 开发环境搭建(Windows环境)

    1.安装 Node.js,一切都基于这个.安装完成后,终端输入 node -v 验证. 2.建立自己的项目目录,然后进入目录. 安装 vue-cli ,终端输入 npm install -g vue- ...

  3. FTP 作业整理

    一.FTP 客户端 与服务器端(没有解决黏包问题的代码) 服务器端设置 import socket import json ADDR = () sk =socket.socket() sk.bind( ...

  4. POJ 1577Falling Leaves(二叉树的建立)

    题目链接:http://poj.org/problem?id=1577 解题思路:题目是中文就不翻译了,网上都说这题很水,但本蒟蒻虽然知道是倒过来建立二叉搜索树,可是实现不了,得到小伙伴的关键递归思想 ...

  5. 基于Spring Boot的Logback日志轮转配置

    在生产环境下,日志是最好的问题调试和跟踪方法,因此日志的地位是十分重要的.我们平时经常使用的log4j,slf4j,logback等等,他们的配置上大同小异.这里就结合Spring Boot配置一下L ...

  6. 带你走进php大马的结构模块编写之路

    本文原创作者:Laimooc 第一部分:前沿综述 本次我主要写了[文件的创建].[文件的删除].[文件的上传].[目录浏览].[命令执行]小模块,以及[组合的目录浏览和文件删除功能]的模块: 实验环境 ...

  7. Zookeeper原理分析之存储结构ZkDatabase

    ZKDatabase在内存中维护了zookeeper的sessions, datatree和commit logs集合. 当zookeeper server启动的时候会将txnlogs和snapsho ...

  8. leetcode-165-比较版本号

    题目描述: 比较两个版本号 version1 和 version2.如果 version1 > version2 返回 1,如果 version1 < version2 返回 -1, 除此 ...

  9. 八、Linux上常用网络操作

    1. 主机名配置 hostname 查看主机名 hostname xxx 修改主机名 重启后无效 如果想要永久生效,可以修改/etc/sysconfig/network文件 2. IP地址配置 set ...

  10. 常用chrome插件&&常用FireFox插件

    第一部分:chrome插件 chrome中输入  chrome://chrome-urls/   可以得到包括缓存在内的很多相关信息. 1.掘金chrome插件 点击下载 掘金是一个高质量的互联网技术 ...