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