JavaScriptでローディング画面表示開始時間を操作したい

Question

JavaScriptでローディング画面表示開始時間を操作したい

https://www.webcreatorbox.com/tech/loading-animation
↑このページを参考に、ページ遷移時にロードが完了したらローディング画面をhiddenにすることはできました。ただローディング時間が短い時はフラッシュのようになるため、最初はhiddenにしておいて、クリックから2秒以上経過してもなおローディング中の場合はローディング画面を表示し、完了後に再度hiddenにしたいです。

つまり

クリック(タイマー開始)
↓
Djangoのviewにてプログラムを実行開始
↓
2秒経過→（template作成+ロード完了）なにもしない
↓
（まだ実行中）loading pageを表示
↓
（ロード完了）loading pageを非表示にしtemplateを表示する

を想定しています。

###懸念点
Djangoを使用しており、定期的にviewでごちゃごちゃやっているためその時はページ遷移に時間がかかってしまいます。<script>をhtmlのheaderに持ってこようと考えましたがページが構成されてからのロードは速いためこれでは解決できないと考えてます。知見をお聞かせください。よろしくお願いいたします。

現在

上の途中まではできたので下に示しておきます。

<!--ローディング画面-->
<div id="loading">
    <svg ....>
        .......
    </svg>
</div>

#loading {
    visibility: hidden;
}
.still_loading {
    visibility: visible;
}
.loaded {
    visibility: hidden;
}

<!--HTMLファイルの一番下-->
<script>
    window.onload = function() {
        document.getElementById('loading').style = "visibility: hidden";
    }

Answer 1

記載されてる懸念点についてはよく理解できなかったので、

最初はhiddenにしておいて、クリックから2秒以上経過してもなおローディング中の場合はローディング画面を表示し、完了後に再度hiddenにしたいです。

の部分についてですが、以下のようなスクリプトで実現できるかと思われます。

<!--HTMLファイルの一番下-->
<script>
const loadingContainer = document.querySelector("#loading");

// script読み込みから２秒後に実行される
// ローディング画面表示処理
const timeout = setTimeout(() => {
  loadingContainer.style.visiblity = "hidden";
}, 2000);

window.onload = () => {
  // リソース読み込み完了時に
  // ローディング画面表示処理をキャンセル
  clearTimeout(timeout);
};
</script>

追記

サーバからクライアントへ送信した時点ではなく、クライアントがサーバへリクエストしたときにロード画面を表示することはJSで可能なのでしょうか？

この場合遷移後の画面でロード画面の処理を定義することは不可能です。

遷移前の画面でクリックイベントを検知してJavaScriptでロード画面を表示し、バックエンドでの計算処理が完了してレスポンスが返ってくるのを待つことになります。

遷移前の画面で表示するロード画面と遷移後の画面で表示するロード画面の見た目を近くしておくことで、ある程度シームレスな感じを出すことはできます。

Comments

[RYUSEITANIGUCHI]

const loadingContainer = document.querySelector("#loading");
// script読み込みから２秒後に実行される
// ローディング画面表示処理
const timeout = setTimeout(() => {
loadingContainer.style.visibility = "visible";
}, 2000);
window.onload = () => {
// リソース読み込み完了時に
// ローディング画面表示処理をキャンセル
clearTimeout(timeout);
loadingContainer.style.visibility = "hidden";
};

このようにすることでページ遷移から2秒以内のロード完了ならば何もしない。2秒以上かかるならロードが完了するまでロード画面を表示し、完了後にロード画面非表示を実装することができました。ありがとうございます。

例えば、サーバからクライアントへ送信した時点ではなく、クライアントがサーバへリクエストしたときにロード画面を表示することはJSで可能なのでしょうか？