11

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

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

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

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

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

4

9 に答える 9

7

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

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

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

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

于 2012-11-29T12:54:11.777 に答える
6

アニメーションも必要な場合は、ブラウザーの動作が大きく異なるため、複雑な問題になります。新しいページの読み込みが開始されると、すべての 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 アニメーションは機能しているようです。

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

于 2012-11-29T13:13:01.813 に答える
2

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);
});
于 2012-11-29T12:56:15.343 に答える
1

おそらく、読み込みダイアログがすぐに表示され、新しいページがレンダリングされたときに消えて、新しいページに置き換えられますか?

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

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

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

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

ターゲットを制御でき、ターゲットをキャッシュ可能にすることができる場合 (数秒間でも): AJAX を介してバックグラウンドでページをロードし、リダイレクトすることができます。最初の読み込みは遅くなり、リダイレクトによりキャッシュからページが読み込まれます。

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

于 2012-11-29T13:03:22.700 に答える
0

非表示の iframe を作成し、load イベントをリッスンできます。また、送信先が 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);
});
于 2012-11-29T13:21:44.247 に答える
0

最初に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");
               }
        });
        });
于 2012-11-29T13:07:21.537 に答える
-1

モーダルボックスを調べてみてください。ajaxリクエストが送信されたときにモデルボックスをアクティブにし、成功したら閉じることができます。 https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box

于 2012-11-29T12:52:57.230 に答える