コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript 非同期 innerHTML 使用分析_JavaScript スキル

WBOY

リリース： 2016-05-16 18:38:21

オリジナル

1661 人が閲覧しました

もちろん、このタイムシェアリングロード技術は単なる補助的な技術であり、ノードを追加する機能はありません。最近では、さらに特異な技術非同期 innerHTML が再び開発されており、この分野の研究では外国人が非常に進んでいることを賞賛せずにはいられません。

コードをコピーコードは次のとおりです。

 
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. (fn,0) このハックは、ブラウザーがアニメーションを一時停止しないように操作をキューからドラッグします
3. ドキュメントフラグメントを使用して、ページのレンダリングの数を減らします
4. コールバックノードは、次の方法で挿入できます。 DOM 標準メソッド (appendChild) (IE の table 、 tbody の innerHTML、tr、td などのタグは読み取り専用です)
使用法:

コードをコピーコードは次のとおりです:

var htmlStr = '

...

.. .

..

';
asyncInnerHTML(htmlStr, function(fragment){
// 'fragment' を通常のものとして扱うことができます
document.body.appendChild(fragment);
});

ただし、このメソッドはテーブルにノードを追加するときに機能するわけではありません。大失敗だと言われます。 IE8、IE6、FF3.5 ではレンダリングエラーが発生することがテストされていますが、chrome、safari4、opera10 などではテーブルを完全にレンダリングできます。 IE8 などがノードを文書フラグメントに転送すると、ノード損失が発生すると推定されています。

<style> 
.filament_table { 
border-collapse:collapse !important; 
border-top:1px solid #A9EA00; 
border-left:1px solid #C1DAD7; 
table-layout:fixed; 
width:400px; 
} 
.filament_table thead th { 
background:#A9EA00; 
color:#FCDE6A; 
border-bottom:1px solid #C1DAD7; 
border-right:1px solid #C1DAD7; 
padding:2px 5px; 
} 
.filament_table tbody td,.filament_table tbody th { 
border-bottom:1px solid #C1DAD7; 
border-right:1px solid #C1DAD7; 
padding:2px 5px; 
color:#76C2C3; 
} 
.filament_table tfoot td { 
border-bottom:1px solid #C1DAD7; 
border-right:1px solid #C1DAD7; 
background:#A9EA00; 
color:#FCDE6A; 
font-size:12px; 
padding:0; 
} 
.filament_table tbody td a{ 
text-decoration:none; 
color:#76C2C3; 
} 
.filament_table tbody tr:nth-child(even) { 
background:#F7FBFF; 
} 
</style>
<table class="filament_table"> 
<thead><tr><th colspan="3">异步的innerHTML</th></tr></thead> 
<tbody id="test"> 
</tbody> 
</table>
<script type="text/javascript"> 
var getData = function(){ 
var builder = []; 
for(var i=0;i<10;i++){ 
builder.push("<tr><td>目录"); 
builder.push(i); 
builder.push("<td>商品"); 
builder.push(i); 
builder.push("<td>商品"); 
builder.push(i); 
builder.push(""); 
} 
return builder.join(''); 
}

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);//然后把插入内容的操作作为异步调用放到一个独立的堆栈中 
} else { 
callback(frag);//这里才是真正执行插入节点的操作 
} 
})(); 
} 
addData = function(){ 
asyncInnerHTML(getData(),function(flag){ 
var tbody = document.getElementById("test"); 
tbody.appendChild(flag); 
}) 
} 
</script> 
<p><button type="button" onclick="addData()">开始</button></p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

在FF3.5的firebug显示下，table新添加的节点，标签都丢失了。

flagment

在IE8的开发人员工具中，我们发现table新添加节点出错严重，见于IE一惯的表现，这是很正常的事！

flagment

相关演示可见无忧的贴子，发现这种方法不是最佳的插入动态内容的方法。

<style> 
#myTable{height:300px;overflow:auto;border:1px solid #39F;width:600px; } 
table,td,th{font-size:12px;border-collapse:collapse;height:100%;border:1px solid #39F; } 
tr.odd{background:#B1E4F3; } 
td.index{background:#B1E4F3;color:#000066;text-align:center; } 
</style> 
 
<div id="myTable"> 
<table cellspacing="0" cellpadding="2" id="tb"> 
<tr class="odd"> 
<td style="width: 51px" class="index">1</td> 
<td style="width: 121px">姓名1</td> 
<td style="width: 51px"><span style="color: #00f">男</span></td> 
<td style="width: 51px">20</td> 
<td style="width: 121px">1987-12-7</td> 
<td style="width: 201px">这个人很懒，什么都没有留下</td> 
</tr> 
</table> 
</div> 
<script> 
freeFor=function(i,to,fn){ 
    (function(){ 
        fn(i); 
        i++<to?setTimeout(arguments.callee,30):0; 
    })(); 
}; 
var T=document.getElementById("tb") 
    ,R=T.rows[0] 
    ,B=T.getElementsByTagName("tbody")[0]; 
freeFor(1,40,function(z){ 
     var F = document.createDocumentFragment(); 
    for (var i=1;i<50;++i ){ 
        var Y=R.cloneNode(true); 
        var I=Y.getElementsByTagName("TD")[0]; 
        I.innerHTML=(i*z+1); 
        I.className='index'; 
        Y.className=i%2?'':'odd'; 
        F.appendChild(Y); 
    }; 
    B.appendChild(F); 
    F=null; 
}); 
</script>

関連ラベル：

javascript 非同期

ソース：php.cn

前の記事：JavaScript キーボードイベントの概要推奨_JavaScript スキル次の記事：JavaScript_javascriptスキルで文字化けに対処した経験

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

NullPointerException とは何ですか?どのように修正すればよいですか?

2024-10-22 09:46:29
初心者からプログラマーへ: 旅は C の基礎から始まります

2024-10-13 13:53:41
PHP による Web 開発のロックを解除する: 初心者ガイド

2024-10-12 12:15:51
C の謎を解く: 新人プログラマーのための明確でシンプルな道

2024-10-11 22:47:31
コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング

2024-10-11 19:36:51
内なるプログラマーを解き放つ: まったくの初心者のための C

2024-10-11 15:50:41
C で生活を自動化する: 初心者向けのスクリプトとツール

2024-10-11 15:07:41
PHP を簡単に: Web 開発の最初のステップ

2024-10-11 14:21:21
Python で何でも構築: 創造性を解き放つための初心者ガイド

2024-10-11 12:59:11
コーディングの鍵: 初心者のための Python の力を解き放つ

2024-10-11 12:17:31

最新の問題

JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります

から 2024-04-06 19:25:49

0

1

505

d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...

から 2024-04-06 18:16:26

0

1

403

ベンダー固有の疑似要素上の JavaScript ホバーイベント次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...

から 2024-04-06 15:35:24

0

1

274

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

CollapseDisplay クラスを使用してブートストラップアコーディオンヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカードタイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...

から 2024-04-06 12:53:11

0

1

376

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート