跪求技术牛人帮下忙，不能见死不救啊，关于HTML5从SQLite中读取数据后，再动态添加List时出现的问题（先谢谢大家了，不能让帖子太沉了啊）

[jie4208]

前提：用的JQUERY MOBILE框架
简单说，就是我用HTML5操作SQLite的DB处理，总是在页面加载后才被执行。
这样我用从SQLite中读取数据，动态给列表添加新DOM，就会在页面显示后，才被再次加载。
现象就是页面（不含新DOM）先被刷新出来，然后新DOM才被添加到页面，会闪一下

具体的代码我放在邮箱里，拿来就能用，麻烦各位技术牛人费下心，小弟不胜感激，泪流满面。
邮箱2选1：[e-mail] 密码：aa123456
[e-mail] 密码：aa123456
我的QQ24小时在线：943714520，欢迎指教

我取了其中一部分代码，在下面：
<script type="text/javascript">
$(function(){
db = window.openDatabase("ikea.db", "1.0", "ikea_database", 1024 * 1024);
db.transaction(function(tr) {
var query =
"CREATE TABLE IF NOT EXISTS Catalog_tbl1111(" +
" ctl_id INTEGER PRIMARY KEY, " +
" ctl_catalog TEXT NOT NULL " +
")";
tr.executeSql(query, [] ,loadItems);
// 总是先执行alert(2222)，后执行回调函数loadItems
alert(2222);
});
// 总是先执行alert（1111），后执行DB操作
alert("1111");
});

// DB事务和回调函数的执行顺序极为诡异（先弹出11111，后弹出22222，最后执行回调），
// 而且回调函数的所有操作被视为在页面加载方法之外（目标是让回调函数在页面加载方法完毕前执行）
// 以上页面加载的ready方法，以下是两个回调函数


function loadItems() {
db.transaction(function(tr) {
var query = "select * from Commodity_tbl where cmd_tpbId = '1' ";
tr.executeSql(query, [], loadItems_onResult);
});
}

function loadItems_onResult(tr, rs) {
for (var i = 0; i < rs.rows.length; i++) {
var row = rs.rows.item(i);
var cmd_id = row.cmd_id;
var cmd_commodity = row.cmd_commodity;
$("#si_ul").append("<li id='"+ cmd_id +"'></li>");
$("#" + cmd_id).append("<a href='link_page/Template_page.htm'>"
+ cmd_commodity + "</a>");
};
$("#si_ul").listview("refresh");
}
</script>

[jie4208]

提供点思路也行

[yibey]

我不太了解HTML5 访问db，但是看了下我想我大概知道了你的意思了， 以下理解是个人根据你当前的实际情况做的一个猜测没有验证过， 你tr.executeSql（这个可能性比较大）这个是一个异步方法，是浏览器发出的动作，浏览器去访问DB（SQLITE）,然后响应结束后，在JS队列中插入回调函数用于回调。这个过程有点像AJAX的原理吧。楼主可以自己验证下。 还有我猜测楼主是想后执行alert（1111），因为访问DB后肯定会有数据返回的，你想利用这些数据去初始化页面，那么你就吧这些所有动作放在alert（2222）后面

[jie4208]

你猜想的没错，我也怀疑我写的操作SQLite的方法是异步的，但又找不着同步操作的写法。现在纠结的就是如何解决这个异步问题，或者有什么别的方法实现我想要的离线状态下的，页面流畅跳转。不过，还是相当感谢您的回答！

[jie4208]

刚才我又看了下2楼的回答，把动态添加列表的操作alert(2222)以后的话，还是会在回调函数LoadItems之前被执行，不起作用

[jie4208]

看来没有HTML5这方面的牛人啊

[碧海情天-赵亮]

先执行哪里，后执行哪里，你已经都测试出来了。剩下的只是把你的代码放在正确的位置。 先刷出原始DOM再出现新的DOM，这是天经地义。你的数据本来就没有，是通过JS建立本地数据库，再插入数据，再查询出数据等等，这些都需要在运行时执行，最后再反映出来。当然要花费运行时间。这和你通过服务器后台程序直接返回一个带有所有最终结果的页面是两回事。 要想流畅跳转不同页面，就不要在READY里直接进行那些数据库操作。把这些操作放在页面里的合适按钮里进行触发，按需执行。这样，在不需要执行而想马上跳转的时候就可以直接跳走。

[碧海情天-赵亮]

至于执行顺序的疑惑，多练习一下异步调用就知道了。

[jie4208]

我想要实现的是在aa页面里，点击button跳转到另一个动态读取数据库的页面bb，页面bb根据aa传来的参数作为关键字去数据库中查寻（因此感觉在页面bb里添加合适的按钮是肯定不行的），然后动态加载列表。我承认页面bb的数据库操作肯定需要时间，但是我想实现的是，页面bb的静态部分等着动态部分生成后，一起显示页面，可能跳转会滞后一点点。我现在有个退而求其次的解决方法，就是在刚开始加载页面bb时，让page的div不显示，直到 loadItems_onResult(tr, rs) 的最后，将page的div的display属性重新设置为block，不过这样页面跳转时会闪一下。 总之，想要达到的效果是页面aa通过button跳转到页面bb时，页面bb作为一个整体流畅的显示出来（尽量不闪）。非常感谢您的回复，对我还是有很大帮助，感觉真的需要换下思路。 另外说一下，aa通过button跳转到页面bb时，如果只是动态添加dom（不涉及数据库），我的目标是可以做到的，很流畅

[碧海情天-赵亮]

引用 8 楼 jie4208 的回复:

但是我想实现的是，页面bb的静态部分等着动态部分生成后，一起显示页面……

这个其实很容易。你把那些“静态”部分，写在JS里，作为一个字串变量。然后在查询出数据之后，把那个字串和数据用+恰当连接起来，然后赋给一个页面里的空DIV的innerHTML，不就一起显示了吗？ 可是这样，开始的时候会一片空白，不是很好。我想你至少应该显示一个表示LOADING的动画图片，然后让它被准备好的内容覆盖。 一般来说，你开始所说的现象是自然并可容忍的，不知你的具体情况是否那么必要要这样处理。

[碧海情天-赵亮]

哦，我想到一些可能了，不好意思，一开始就想到但没告诉你这个简便方法，只是因为对你说的必要性没有概念。 有时候是会这样的，别人看你问题，经常会从整体看有没有更好的方式，甚至认为有没有必要。如果你把问题的背景和目标及其必要性都说清楚一点，就能打消一些不必要的考虑。

[Joyce-Luo]

加载时处理~~~