关于ajax的异步 gif动画图片不动
故事得从一个gif图片开始。
接上篇文章,我的树将会在用户点击树上节点才异步到一个服务器页面获取子节点,并在页面中将子节点加上。
在该方法开始时我将我的wait.gif图片呈现出来,结果在页面加节点的过程中,发现该gif动画图片不动了!!
跟了下时间,发现服务器处理请求并发回数据的时间是微秒级别的,不至于这么慢呀,这是怎么回事?
是前台加载出了问题吗?前台添加子节点到树上的操作我也是丢在异步的方法里的,页面不应该卡住啊。
作了下试验,结果发现就算是将添加元素的操作放到异步方法中,js的处理也是同步的!!所以这段时间会卡住。
解释:
在用了ajax后,“ajax发送请求到服务器页,服务页返回处理后的数据”该过程的确是异步的,但是在回到发送请求的页面后所作的操作,如添加dom元素,或作些逻辑运算等等js代码都是同步的。
请看测试代码:
 function test2()
function test2()
 {
        {
 //目标页
            //目标页
 var url = "ajaxtest.aspx";
            var url = "ajaxtest.aspx";
 //传给目标页的参数
            //传给目标页的参数            
 var strParams = "testid=3";
            var strParams = "testid=3";            
 
            
 var loader1 = new net.ContentLoader(url,load,null,"GET",strParams);
            var loader1 = new net.ContentLoader(url,load,null,"GET",strParams);
 //load();
            //load();
 }
        }
 
        
 function load()
        function load()
 {
        {
 var html = "";
            var html = "";        
 for(var i = 1;i <= 5000;i++)
            for(var i = 1;i <= 5000;i++)
 {
            {    
 html += i + ",";
                html += i + ",";                
 }
            }
 span1.innerHTML += html + "<br>";
            span1.innerHTML += html + "<br>";
 }
        }
 <span id="span1"></span>
<span id="span1"></span>            
 <input type="button" id="btn" value="testGIF" onclick="test2()">
            <input type="button" id="btn" value="testGIF" onclick="test2()">
 <img id="imgLoading" src="../images/wait.gif">
            <img id="imgLoading" src="../images/wait.gif">
可以看到在js中:
用异步:var loader1 = new net.ContentLoader(url,load,null,"GET",strParams);
或者是直接调load()
wait.gif图片都会卡住,直到将span1.innerHTML处理完毕。
(PS:我的机子在i加到5000的时候已经有卡的效果了,你可以根据自己机子设置该值,直到卡为止,呵呵)
其实也就只有发送XMLHttp请求那里有个参数用来设置是否异步(req.open(method,url + "?" + params,true)),也就是说只有发送请求可以异步,为什么我会期望在回调函数里做的事情会是异步的呢?真不知道我是怎么想的.
所以想让IE不卡的办法就只有加快这段加载节点的代码,缩减它占用资源的时间。
是的,那要怎么办呢?
在服务器页面生成html,然后直接将其值赋给树的innerHtml是不是会更快呢?
可是怎么生成html?看了dhtmlxtree生成树的代码,发现它每个节点都是动态加上去的。截出树中画一行的代码看:
dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject,node)
{
var tr =document.createElement('tr');
var td1=document.createElement('td');
var td2=document.createElement('td');
td1.appendChild(document.createTextNode(" "));
td2.colSpan=3;
td2.appendChild(htmlObject);
tr.appendChild(td1);tr.appendChild(td2);
return tr;
};
也就是说我得在服务器页中生成这样的html(由前端页面取出并赋给树所在的div的innerHtml)。
还是留到以后吧……很头疼拼标签。
虫子建议将树这块放到一个用户控件中,异步加载这个用户控件,可是树还得与右边的ListBox交互呢。那就把整个dropDownList以下的部分全部放入用户控件,可是怎么把已选的IDC资源绑定到这个用户控件里的ListBox(传参数可以解决),怎么把选到ListBox中的值返回到页面呢?也就是说在该选择器中点确定时怎么获取ListBox中的值
接上篇文章,我的树将会在用户点击树上节点才异步到一个服务器页面获取子节点,并在页面中将子节点加上。
在该方法开始时我将我的wait.gif图片呈现出来,结果在页面加节点的过程中,发现该gif动画图片不动了!!
跟了下时间,发现服务器处理请求并发回数据的时间是微秒级别的,不至于这么慢呀,这是怎么回事?
是前台加载出了问题吗?前台添加子节点到树上的操作我也是丢在异步的方法里的,页面不应该卡住啊。
作了下试验,结果发现就算是将添加元素的操作放到异步方法中,js的处理也是同步的!!所以这段时间会卡住。
解释:
在用了ajax后,“ajax发送请求到服务器页,服务页返回处理后的数据”该过程的确是异步的,但是在回到发送请求的页面后所作的操作,如添加dom元素,或作些逻辑运算等等js代码都是同步的。
请看测试代码:
 function test2()
function test2() {
        { //目标页
            //目标页 var url = "ajaxtest.aspx";
            var url = "ajaxtest.aspx"; //传给目标页的参数
            //传给目标页的参数             var strParams = "testid=3";
            var strParams = "testid=3";             
             var loader1 = new net.ContentLoader(url,load,null,"GET",strParams);
            var loader1 = new net.ContentLoader(url,load,null,"GET",strParams); //load();
            //load(); }
        } 
         function load()
        function load() {
        { var html = "";
            var html = "";         for(var i = 1;i <= 5000;i++)
            for(var i = 1;i <= 5000;i++) {
            {     html += i + ",";
                html += i + ",";                 }
            } span1.innerHTML += html + "<br>";
            span1.innerHTML += html + "<br>"; }
        } <span id="span1"></span>
<span id="span1"></span>             <input type="button" id="btn" value="testGIF" onclick="test2()">
            <input type="button" id="btn" value="testGIF" onclick="test2()"> <img id="imgLoading" src="../images/wait.gif">
            <img id="imgLoading" src="../images/wait.gif">可以看到在js中:
用异步:var loader1 = new net.ContentLoader(url,load,null,"GET",strParams);
或者是直接调load()
wait.gif图片都会卡住,直到将span1.innerHTML处理完毕。
(PS:我的机子在i加到5000的时候已经有卡的效果了,你可以根据自己机子设置该值,直到卡为止,呵呵)
其实也就只有发送XMLHttp请求那里有个参数用来设置是否异步(req.open(method,url + "?" + params,true)),也就是说只有发送请求可以异步,为什么我会期望在回调函数里做的事情会是异步的呢?真不知道我是怎么想的.
所以想让IE不卡的办法就只有加快这段加载节点的代码,缩减它占用资源的时间。
是的,那要怎么办呢?
在服务器页面生成html,然后直接将其值赋给树的innerHtml是不是会更快呢?
可是怎么生成html?看了dhtmlxtree生成树的代码,发现它每个节点都是动态加上去的。截出树中画一行的代码看:
dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject,node)
{
var tr =document.createElement('tr');
var td1=document.createElement('td');
var td2=document.createElement('td');
td1.appendChild(document.createTextNode(" "));
td2.colSpan=3;
td2.appendChild(htmlObject);
tr.appendChild(td1);tr.appendChild(td2);
return tr;
};
也就是说我得在服务器页中生成这样的html(由前端页面取出并赋给树所在的div的innerHtml)。
还是留到以后吧……很头疼拼标签。
虫子建议将树这块放到一个用户控件中,异步加载这个用户控件,可是树还得与右边的ListBox交互呢。那就把整个dropDownList以下的部分全部放入用户控件,可是怎么把已选的IDC资源绑定到这个用户控件里的ListBox(传参数可以解决),怎么把选到ListBox中的值返回到页面呢?也就是说在该选择器中点确定时怎么获取ListBox中的值
 
                    
                 
        
 
             
                
            
         
 浙公网安备 33010602011771号
浙公网安备 33010602011771号