|
|
復(fù)制代碼 代碼如下:
function asyncInnerHTML(HTML, callback) {
var temp = document.createElement('div'),
frag = document.createDocumentFragment();
temp.innerHTML = HTML;//要加入的內(nèi)容先放到這里。
(function(){
if(temp.firstChild) {
frag.appendChild(temp.firstChild);//然后一點(diǎn)點(diǎn)挪到文檔碎片
setTimeout(arguments.callee, 0);//利用異步調(diào)用自身拼湊文檔碎片，直到div的節(jié)點(diǎn)被搬空
} else {
callback(frag);//這里才是真正執(zhí)行插入節(jié)點(diǎn)的操作
}
})();
}
此技術(shù)的優(yōu)點(diǎn):
1. 利用閉包解決 IE6 的內(nèi)存溢出問題
2. 利用setTimeout(fn,0) 這個(gè)hack將操作從隊(duì)列中拖出，防止瀏覽器假死
3. 利用Document Fragment減少對(duì)頁(yè)面的渲染次數(shù)
4. 回調(diào)的節(jié)點(diǎn)可以使用 DOM 標(biāo)準(zhǔn)的手法（appendChild）插入(如IE的table,tbody,tr,td等標(biāo)簽的innerHTML是只讀的)
使用方法：
復(fù)制代碼 代碼如下:
var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';
asyncInnerHTML(htmlStr, function(fragment){
// You can treat 'fragment' as a regular node.
document.body.appendChild(fragment);
});
不過，這個(gè)方法在table中添加節(jié)點(diǎn)時(shí)并不是個(gè)個(gè)瀏覽器都行得通，不得不說是一大敗筆。經(jīng)測(cè)試IE8，IE6，F(xiàn)F3.5渲染出現(xiàn)差錯(cuò)，chrome,safari4,opera10等能完好地把表格渲染出來。估計(jì)是IE8等在把節(jié)點(diǎn)轉(zhuǎn)移到文檔碎片時(shí)發(fā)生節(jié)點(diǎn)丟失現(xiàn)象。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
在FF3.5的firebug顯示下，table新添加的節(jié)點(diǎn)，標(biāo)簽都丟失了。
在IE8的開發(fā)人員工具中，我們發(fā)現(xiàn)table新添加節(jié)點(diǎn)出錯(cuò)嚴(yán)重，見于IE一慣的表現(xiàn)，這是很正常的事！
相關(guān)演示可見無(wú)憂的貼子，發(fā)現(xiàn)這種方法不是最佳的插入動(dòng)態(tài)內(nèi)容的方法。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
JavaScript技術(shù)：javascript 異步的innerHTML使用分析，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
