1.问题描述

今天运维提了一个bug问题,说是初始化表格加载的时候,出现问题:1.默认分页查询,页面加载了两次,第一次是分页查询,加载完毕后,又加载了一次全部查询展示;2.表格下方的页数统计显示会在第二次加载结束后显示页数为NULL.

2.问题查找

我看了一下页面jQuery初始化datagrid,发现有一下问题:在初始化加载过程中,对datagrid进行方法初始化,添加列表的双击事件,事件会加载本页面的一个dialog,并对该dialog进行数据初始化.

当我本地测试一下,解析控制台日志,发现该页面刷新一次,后台会执行四次查询sql,其中两次sql会被easyui自动添加上分页页数,另外两条sql则是全部.

这样子,就找到问题所在了,在初始化datagrid的过程中,sql参数封装有问题.

3.问题解决

经过资料查找和测试,最终找到了解决方法.

将$(function(){});这种初始化加载方法,换成window.onload = function(){}方法.

1. $(function(){})方法的特点:不会被覆盖,即框架生成和自己写了多少个该方法,就会执行多少次.在DOM加载完毕后，页面全部内容完全加载完毕前被执行.

2.window.onload方法的特点:会被覆盖,即无论有多少个该方法,最终都会执行一个,而且是最后一个.会在页面资源全部加载完毕后才会执行.

现附上DOM页面加载顺序: 

1.解析HTML结构 

2.加载外部的脚本和样式文件 

3.解析并执行脚本代码 

4.执行$(function(){})内对应代码 

5.加载图片等二进制资源 

6.页面加载完毕，执行window.onload

参考资料:https://www.cnblogs.com/xfcao/p/6514438.html