關於ajax的非同步 gif動畫圖片不動

來源:互聯網
上載者:User
故事得從一個gif圖片開始。
接上篇文章,我的樹將會在使用者點擊樹上節點才非同步到一個伺服器頁面擷取子節點,並在頁面中將子節點加上。
在該方法開始時我將我的wait.gif圖片呈現出來,結果在頁面加節點的過程中,發現該gif動畫圖片不動了!!
跟了下時間,探索服務器處理請求並發回資料的時間是微秒層級的,不至於這麼慢呀,這是怎麼回事?
是前台載入出了問題嗎?前台添加子節點到樹上的操作我也是丟在非同步方法裡的,頁面不應該卡住啊。
作了下實驗,結果發現就算是將添加元素的操作放到非同步方法呼叫中,js的處理也是同步的!!所以這段時間會卡住。
解釋:
在用了ajax後,“ajax發送請求到伺服器頁,服務頁返回處理後的資料”該過程的確是非同步,但是在回到發送請求的頁面後所作的操作,如添加dom元素,或作些邏輯運算等等js代碼都是同步的。

請看測試代碼:

function test2()
        {
            //目標頁
            var url = "ajaxtest.aspx";
            //傳給目標頁的參數            
            var strParams = "testid=3";            
            
            var loader1 = new net.ContentLoader(url,load,null,"GET",strParams);
            //load();
        }
        
        function load()
        {
            var html = "";        
            for(var i = 1;i <= 5000;i++)
            {    
                html += i + ",";                
            }
            span1.innerHTML += html + "<br>";
        }

<span id="span1"></span>            
            <input type="button" id="btn" value="testGIF" onclick="test2()">
            <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中的值

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.