ユーザーが特定のリンクをクリックしたときに読み込みダイアログを表示する方法は？

Question

私はロードが非常に遅いWebページを開くURLを持っていますが、私はそれを制御できません。

誰かがこのURLをクリックしたときに読み込みダイアログを表示したり、このようなときにオーバーレイdivを含むページをブロックしたいと考えています。

注：これはajax関連の問題と同じではありません。これは通常のURLクリックでユーザーを形成するものであり、すべてが特定のものだけではありません。

<A href="http://veryslowload.com" onClick="...">slow load...</a> 

私が探しているものはonClickを置くべきだと思います。

Answer 1

Modalボックスを調べるとよいでしょう。モデルボックスをアクティブにするには、ajaxリクエストが送信され、成功するとモデルボックスを閉じることができます。

$(function(){ 
​ $('a').click(function(){ 
    $('<div class=loadingDiv>loading...</div>').prependTo(document.body); 
    });​ 
}); 

Demonstrationが

（最良の効果のために非常に遅いページへのリンクを変更します）しかし、それはページによって異なります： https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box

Answer 2

あなたはこれを行うことができ、ページがすぐにいくつかのコンテンツを送信する場合コンテンツ全体ではなく、あなたのdivを見る時間がありません。

Answer 3

ajaxはよりエレガントですが、可能です。デフォルトのイベントを防止してUIを更新し、目的のURLに変更してナビゲーションをインターセプトする必要があります。このような何か：

$('#mylink').click(function(e) { 
    e.preventDefault(); 
    var url = this.href; 
    // Update the UI here 
    setTimeout(function() { 
     // This is a trick to force a repaint 
     window.location.href = url; 
    },0); 
}); 

Answer 4

おそらく、あなたは消えて、その後、ロード]ダイアログボックスがすぐに表示されたいと思うでしょうし、新しいページがレンダリングされたときに新しいページに置き換えられますか？

3つのアイデアが思い浮かぶ。

---

あなたはソースページのコントロールではなく、ターゲットがある場合は - このような何かでタグの通常の動作を置き換えるためにクリックイベントハンドラを使用します。

1. 表示のローディングアニメーションを
2. タグのhref属性で定義されたURLにAJAXリクエストを送信する（代替としてURLをソースとして非表示にする）
3. リクエストが完了したら、ドキュメントの内容をレスポンスに置き換えます。

元のページで定義されているjavascriptとcssを失うことはないので、これは本当に毛深くなる可能性があります。また、ユーザーのブラウザに表示されるURLは変更されません。あなたは、AJAXを経由して、バックグラウンドでページをロードし、それにリダイレクトすることができます。あなたは、ターゲットのコントロールを持っているし、（たとえ数秒間）、目標キャッシュ可能を作ることができれば

---

。最初のロードは遅くなり、リダイレクトはキャッシュからページをロードします。

---

そして、さらに別の代替：あなたがターゲットページのコントロールを持っている場合は、パラメータが存在する場合、サーバが唯一のローディングアニメーションとのビットからなるページを返すようにオプションのパラメータを定義することができます実際のページを読み込むjavascript。 AJAXをしながら