web-dev-qa-db-ja.com

誰かが特定のリンクをクリックしたときに読み込みダイアログを表示するにはどうすればよいですか？

読み込みが非常に遅いWebページを開くURLがあり、それを制御することはできません。

誰かがこのURLをクリックしたときに読み込みダイアログを表示したり、これが発生したときにオーバーレイdivでページをブロックしたりしたいのですが。

注：これはajax関連の質問と同じ質問ではありません。これは、ユーザーからの通常のURLクリックの場合であり、すべてが特定の質問だけではありません。

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

私が探しているのは、onClickに何を置くかだと思います。

javascriptjqueryloading
8
sorin

あなたはこれを行うことができます ：

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

デモンストレーション （最高の効果を得るには、リンクを非常に遅いページに変更してください）

ただし、ページによって異なります。ページがコンテンツ全体ではなく一部のコンテンツをすぐに送信する場合、divを表示する時間がありません。

6
Denys Séguret

アニメーションも必要な場合、ブラウザの動作が大きく異なるため、複雑な問題になります。新しいページの読み込みが開始されると、すべてのGIFアニメーションを停止するものもあります。基本的に、jQueryがあり、spin.jsライブラリをダウンロードすると、次のようになります。

ここで実用的な解決策を参照してください：

http://jsfiddle.net/7aJyP/

<style>
#loading {
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:1000;
    width:100%;
    height:100%;
    min-height:100%;
    background:#000;
    opacity:0.8;
    text-align:center;
    color:#fff;
}

#loading_anim {
    position:absolute;
    left:50%;
    top:50%;
    z-index:1010;
}
</style>



<div id="loading"><div id="loading_anim"></div></div>

<a href="http://pangoo.it" class="mylinkclass withanimation">link</a>



<script>

$(function () {
    $(".withanimation").click(function(e) {
        e.preventDefault();
        $("#loading").show();

        var url=$(this).attr("href");

        setTimeout(function() {
            setTimeout(function() {showSpinner();},30);
            window.location=url;
        },0);

   });
});

function showSpinner() {
    var opts = {
      lines: 15, // The number of lines to draw
      length: 3, // The length of each line
      width: 4, // The line thickness
      radius: 30, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#fff', // #rgb or #rrggbb
      speed: 2, // Rounds per second
      trail: 70, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };
    $('#loading_anim').each(function() {
        spinner = new Spinner(opts).spin(this);
    });
}
</script>

アニメーション（GIF）を使用すると、一部のブラウザでアニメーションがフリーズする場合があります。 spin.jsライブラリを使用しました（ http://fgnass.github.com/spin.js/ ）。 GIFがフリーズしている間、JavaScriptアニメーションは機能しているようです。

すべてのブラウザでテストしてください！

6
FrancescoMM

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);
});
2
bfavaretto

おそらく、読み込みダイアログをすぐに表示し、新しいページがレンダリングされたときに非表示にして新しいページに置き換える必要がありますか？

3つのアイデアが思い浮かびます。

ソースページを制御できるがターゲットは制御できない場合-クリックイベントハンドラーを使用して、タグの通常の動作を次のように置き換えます。

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

ただし、元のページで定義されているjavascriptとcssが失われることはないため、これは非常に厄介になる可能性があります。また、ユーザーのブラウザに表示されるURLは変更されません。

ターゲットを制御でき、ターゲットをキャッシュ可能にすることができる場合（数秒でも）：AJAXを介してバックグラウンドでページをロードし、次にリダイレクトすることができます。最初のロードは遅い場合、リダイレクトはキャッシュからページをロードします。

さらに別の方法：ターゲットページを制御できる場合は、オプションのパラメーターを定義して、パラメーターが存在する場合、サーバーが読み込みアニメーションと実際のページを読み込むJavaScriptのビットのみで構成されるページを返すようにすることができます。

1
AmericanUmlaut

最初にspinner.gifをフォームのどこかに保存し、非表示にして、src = ""を配置します。

したがって、画像のsrcはありません

しかし、後でajax呼び出しを行うときに、スピナー画像のsrcを設定できるため、ページが読み込まれているように見えます

$(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
               $("#tempForm").ajaxForm({
               url:'url to be called',
               type:'post',
               beforeSend:function()
               {
                   alert("this is the place where you place things to happen till your page is being transfered to the given URL so i am setting the src for the spinner image here");  
                   $("#spinner image ID").attr("src","../images/spinner.gif");
               },
               success:function(e){
               alert("do whatever you want with response here");
               }
        });
        });
0
Hussain Akhtar Wahid 'Ghouri'

非表示のiframeを作成し、ロードイベントをリッスンできます。また、宛先でxフレームコンテンツが妨げられている場合は、約1秒後に手動チェックを行う必要があります。

デモ： http://jsbin.com/ijofih/1

$('a').click(function(e) {
    $(this).text('Loading...'); // do your UI thing here
    e.preventDefault();
    var destination = this.href;
    setTimeout(function() {
        window.location = destination;
    },1000);
    $('<iframe>').hide().appendTo('body').load(function() {
        window.location = destination;
    }).attr('src', destination);
});
0
David Hellsing

これは古いトピックですが、JQueryに依存しない単純なソリューションが必要な場合は、リンクのonClickに次を追加してください。

<A href="http://veryslowload.com" onClick=""javascript:document.getElementById('page-loader').style.display='block';"">slow load...</a>

次に、ページのどこかに、読み込みダイアログに必要なものを含む非表示のDIVを配置します。

<div id="page-loader">
    <h3>Loading page...</h3>
</div>

次のようにCSSでDIVを非表示にします。

#page-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
display: none;
text-align: center;
width: 100%;
padding-top: 25px;
background-color: rgba(255, 255, 255, 0.7);
}

実例のJSfiddleは次のとおりです。 http://jsfiddle.net/meb69vqd/

私はこの例を完全に信用することはできません。このテクニックに関する追加のヒントがここにあります： https://css-tricks.com/css-page-loader/

0
Frank