問題タブ [loading-animation]

すべてのコンテンツが iframe 内にある Web アプリケーションを維持しています。その構造の簡単な内訳: (各「-」は新しいレイヤーを表します)

基本的に、メインの iFrame の中に 4 つの iFrame があります。すべての iframe の読み込みが完了したら、画面から削除する必要があるローダー アニメーションがあります。各 iframe には、ページでの選択によって更新されるデータがあります。私が必要としているのは、更新が行われるたびに読み込みアニメーションが画面全体をカバーすることです。これを処理するための最良のアプローチは何ですか? 私はあなたが使用できることを知っています

iframe の読み込みがいつ終了したかを判断します。それらすべてを一度にリッスンし、完了したらロードアニメーションをオフにする簡単な方法はありますか? ご協力ありがとうございました。

各 iframe の作成方法は次のとおりです。

その後：

if (ConfigData["GlobalOptions"].Quadrants[x].QuadrantId == "1") { $("#q1Container").html(p1HTML); }

私が取り組んでいるこの Web プロジェクトでは、ユーザーは単純な入力 [type=file] を使用して画像とファイルをページにアップロードできます。しかし、この機能は別の php スクリプトにあるため、php スクリプトにリンクする iframe を Web ページに配置しました。ファイルをアップロードすると、ファイルが読み込まれるまでの待ち時間が長くなり、ブラウザの左下に「localhost で待機中」(MAMP を使用) と表示されます。Web ページが php スクリプトの実行が完了するのを待っていることを検出して、読み込みアニメーションを表示し、送信ボタンを無効にする方法はありますか? jQueryが使えません。

ページが開いたときに読み込み中のテキストまたはアニメーションを表示しようとしていますが、どういうわけか機能せず、この説明から賢くなっていません : http://api.highcharts.com/highstock/Chart.showLoadingボタンでさまざまな例もチェックしましたが、残念ながら私にもうまくいきませんでした。これは私のコードのスニペットです:

どんな助けにも感謝します。

私はすでに AfterEffects で作成したアニメーションを持っており、それを Lottie で自分のアプリに使用できる形式に変換できると思います。私が疑問に思っているのは、アプリの読み込みが完了するまで、アプリを開いたときにこのアニメーションの実行を開始するにはどうすればよいですか?

私は現在、自分の語彙を練習するための Electron アプリに取り組んでいます。本質的に、ある言語で保存されたいくつかの文があり、ユーザーがボタンを押すと、ランダムに選択された文が別の言語に翻訳され、ユーザーはそれを別の言語に翻訳する必要があります。

翻訳に数秒かかる場合があり、その間にローディング アニメーションを表示したい場合があります。基本的には #5 のコードをここにコピーしました(基本的には、以下の関数に追加された HTML 要素と CSS です)。

さて、私の問題は次のとおりです。読み込み中のアニメーションが表示されず (長時間待機している場合でも)、コードが多少非同期に実行されているためと思われます。関数の最後でアニメーションを削除しないと表示されるため、アニメーション自体は正常に機能しますが、削除しないと、翻訳に数秒かかっても表示されません。実行順序は のはずですがdocument.body.appendChild(loadElem); -> doTranslationStuffAndSetHTML(); -> document.body.removeChild(loadElem);、document.body.appendChild(loadElem); -> document.body.removeChild(loadElem); -> doTranslationStuffAndSetHTML();、またはそのようなものです。翻訳された文が表示されるまでの間、ページ全体がフリーズするため、翻訳に数秒かかることはわかっています（すべてdoTranslationStuffAndSetHTML()）。Promises も使用してみましたが、役に立ちませんでした。誰か助けてくれませんか？ページが更新されたかどうか、新しい要素がその HTML コードに追加されたかどうかを確認する方法はありますか (追加されただけでなく、既に表示されている場合など)。それは Electron の問題ですか、それともコードの実行を最適化しようとしてコンパイラに問題があるのでしょうか?

doTranslationStuffAndSetHTML の実際のコードは次のとおりです。

ここでの唯一の関連点はおそらく vocabHandler.getPhrase が翻訳関数を呼び出すことです。この関数は、Google Translate APIを使用して特定のフレーズを特定の言語に翻訳する Python スクリプトを呼び出します。