ユーザーがダウンロードボタン/リンクをクリックすると、ロード画面がページに表示されます。ダウンロードプロセスが終了した後、このボタンでonblurイベントを使用して、ロード画面を非表示にします。どのブラウザでも正常に動作しますが、GoogleChromeでは動作しません。
Chromeで使用できるイベントリスナーやその他の簡単な方法はありますか？
リンク：
<a href="/resources/foo" class="show-ls" onblur="hideLS()">Download</a>
show-ls関数はロード画面を表示するだけです：
$('.show-ls').click(function () {
$('#loading-screen').show();
});
読み込み画面は本体のdiv要素です：
<div id="loading-screen" class="loading-screen" style=""></div>
.loading-screen {
background: rgba(255, 255, 255, 0.6) url('/images/loadingscreen.gif') no-repeat fixed center center;
width: 100%;
height: 100%;
position: fixed;
}
hideLS関数は、ロード画面を非表示にするだけです。
hideLS= function () {
var loadingScreen = $('div.loading-screen');
if (loadingScreen.length > 0)
loadingScreen.hide();
};
ダウンロードプロセスは問題ありません。ロード画面も問題ありません。問題は、Chromeでファイルのダウンロードが完了した後にロード画面を非表示にすることだけです。
ぼかしイベントは、ブラウザで機能するかどうかに関係なく、脆弱な回避策にすぎません。
blurイベント手段は、その何かがフォーカスを失っています。Firefoxブラウザ（とりわけ）が実際にクリックしたリンクをぼかす可能性がありますが、他の何かもそのリンクをぼかす可能性があります（タブの変更、ロード画面のクリックなど）。それはあなたが望まないかもしれないものです。
また、HTTPはステートレスプロトコルであるため、サーバーの助けなしにこれがいつ終了するかをクライアント側で知ることはできません。また、ファイルのダウンロードは「別のタブ」にあり、アクセスできない別のコンテキストにあるため、JSに依存してこれを検出することはできません。
私が想像できる唯一の解決策（および他の解決策もそうです）：ダウンロードが開始されたら、定期的に（500ミリ秒ごとなど）サーバーのダウンロードステータスをチェックするJS間隔を開始します。サーバー側では、ダウンロードの開始時にユーザーへのダウンロードを識別し、要求されたときにクライアントにステータスを応答する必要があります。もちろん、これがどのように機能するかは、使用するサーバー環境とプログラミング言語によって異なります。PHPで動作させることはできますが、他のすべての言語を知っているわけではありません。
ところで：ロード画面（またはスプラッシュ画面）はソフトウェアがロードされる前に一度表示される画像であるため、「ロード画面」を「ロードインジケーター」と呼びます（少なくとも私のコンピューター/脳では）。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加