1

私のプロジェクトでは、「製品の詳細を表示」をクリックした後、データがサーバーから取得されるまで、.gif アニメーション (データがダウンロードされていることを示すために回転ホイールを表示する必要があります) を表示したいと考えています。

このために、私は2つのアプローチに従いました。

1 番目のアプローチは Ajax を使用し (1 番目のアプローチでは、応答を取得した後にデータをページに追加します)、2 番目のアプローチは Ajax を使用しません (ページが更新されます)。

要件に従って、2番目のアプローチで機能を実装する必要があります。しかし、2 番目のアプローチでは、アニメーションが機能していません (ホイールが回転していません)。ブラウザが応答待ちでビジー状態のようです。以下に、2 つのアプローチの jQuery コードを示します。2番目のアプローチで機能させる方法を誰かが提案できますか。前もって感謝します。

最初のアプローチ:

function DisplayProductDetails () {
    $(‘ a#getProdutDetails).click(function (e) {         
        $.get($(this).attr('href'), function (response) {
            $("div.loadingIndicator").show();
            if (response.length > 0) {
                $('body').append(response);
            }
        });
        e.preventDefault();
        return false;
    });
}

2番目のアプローチ:

function DisplayProductDetails () {
    $(‘ a#getProdutDetails').click(function (e) {     
        $("div.loadingIndicator").show();
        var link = $(this).attr('href');
        window.document.location = link;
        e.preventDefault();
        return false;
    });
}
4

1 に答える 1

0

私はあなたがこれをしたい理由を理解していると思います、そしてこれは私が思いつくことができる最高のものです：

<div>
    <a href='http://api.jquery.com/jQuery.get/' id='theLink'>Click here to redirect</a>
    <img style='display:none;' id='Loading' alt='Loading...' src='http://oilandgas.rockwellautomation.com/images/loading.gif'>
</div>


$(function(){
    $('#theLink').click(function(e){
        $(document).queue('LoadPage',function(next){
            $('#Loading').fadeIn('slow',function(){
                setTimeout(function(){next();},1000);
            });
        });

        $(document).queue('LoadPage',function(next){
            var link = $(this).attr('href');
            window.document.location = link;        
        });

        $(document).dequeue('LoadPage');
        e.preventDefault();
        return false;
    });
});

リンクをたどる前に、読み込み中の画像を強制的に表示します。ブラウザがナビゲートを開始してもすぐにページをクリアしない場合、ブラウザがリンクされたリソースをフェッチしている間、ユーザーには読み込み中のgifが表示されます。

私自身の観察によると、ほとんどのブラウザは、取得しようとしているリソースから応答を受信するまで、現在のページをクリアしないようです。この場合、ページがクリアされるまでユーザーに画像が表示されます。

これが私が上に示した解決策のフィドルです。接続が遅い場合は、おそらく私が話していることを確認できます。そうでない場合は、画像が表示されるよりも速くリダイレ​​クトされます。

フェードインで画像の表示を遅らせ、キューを使用してコード内のこれらのアクションを分離することにより、高速接続でも画像を表示する機会があります。ページがリダイレクトされる前に画像が表示されるようにしたい場合は、次のようにいつでもそこに遅延を追加できます。

 $(document).queue('LoadPage',function(next){
    $('#Loading').fadeIn(1000).delay(1000).show(function(){
        next();
    });
 });

これがその方法の例です

于 2013-01-25T21:27:24.193 に答える