2
私はモーダルで表示するためにウェブからいくつかのコンテンツを取得する必要があるモバイルウェブページを持っています。モーダル自体は、閉じられたときにdisplay:noneに設定されたdivコンテナであるJavascriptを介して作成されます。すべてのコンテンツがレンダリングされるまでjavascriptで作成されたdivを非表示にする
<body>
Display this content:
<button onclick="displayModal()">display</button>
<script type="text/javascript">
var htmlContents = "<div>some pretty heavy content</div>";
var modal = //some code to create the modal div element.
modal.style.display = 'none';
function displayModal() {
modal.innerHTML = htmlContents;
modal.style.display = 'block';
}
</script>
</body>
ユーザーがボタンをクリックし、その後、我々はいくつかのHTMLでのdivのinnerHTMLを移入し、その後display: block
にモーダルを切り替えて次にここでの問題は、内容が、我々はinnerHTMLの5月に追加しているということですかなり重いです。たくさんの画像とCSSがレンダリングに時間がかかることがあります（古いデバイスでは1〜2秒）。しかし、彼らは1つずつビューにポップアップを開始します。したがって、ユーザーは、物事がレンダリングされている間、画像とdivを表示することがあります。
すべてのコンテンツがオフスクリーンでレンダリングされた後に、モーダルを表示のみに切り替える方法はありますか？
P.S：これは、純粋なjavascript（jqueryまたは他のライブラリはパフォーマンスが問題であるため）で書かれています。
あなたが画像をダウンロードするために、その帯域幅を検討している可能性がレンダリングよりも大きなパフォーマンスのボトルネックになりますか？ – Timo
コンテナにhtmlを挿入するには、container.querySelectorAll（ 'img'）を実行してからonloadイベントをアタッチしてください。最後の画像がロードされたら、表示をトリガーします。しかし、私はユーザーがコンテンツを負荷として見たいかもしれないと思う。 –
@ Vitim.usどのようにすべての画像が読み込まれたのかを知ることができますか？ – roloenusa