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