0

ここで利用できる Jquery プラグインであるこの読み込みバーがあります: http://www.jqueryscript.net/loading/Smooth-Progress-Bar-Loading-Effect-With-jQuery.html

ただし、バーは実際に読み込まれるものを表示するのではなく、リダイレクトで機能します。以下の $(this).children().html ... のコードが配置されると、Inspect Element タブの進行状況バーが 0% から 100% に変化します。ロードするのは素晴らしいことですが、バーが100％になったら、ページを最新の状態に保ち、他のページがクリックされたときにロードする必要があります。

新しい YouTube の赤いプリローダーに似ています。このスクリプトがこれに対応していることは確かですが、何時間も微調整して変更を試みた後、どうすればよいかわかりません。

私はPHPの頭であり、新しいjQueryです:/

<script type='text/javascript'>
    function loading(percent){
        $('.progress span').animate({width:percent},1000,function(){
            $(this).children().html(percent);
            if(percent=='100%'){
                $(this).children().html('Loading Complete, Redirect to Home Page...&nbsp;&nbsp;&nbsp;&nbsp;');
                setTimeout(function(){
                    $('.container').fadeOut();
                    location.href="http://www.jqueryscript.net";
                },1000);
            }
        })
    }
  </script>
4

1 に答える 1

0

これは、Ajax リダイレクトを行うばかげた方法のように思えます。新しいページを完全にロードする必要はありません。そのため、内部コンテンツを更新するだけでよいため、Ajax は非常に有益です。

Ajax 経由でページをロードするより良い方法には、次のものが含まれます。

  • Ajaxと通常のロードを使用する場合は、同じ URL を呼び出します。サーバー側を使用して HTTP ヘッダーX-REQUESTED-WITH: XMLHTTPRequestを取得し、存在する場合はコンテンツを送信するだけです。そうすれば、JavaScript を使用しないユーザーでも同じリンクをクリックして、スタンドアロン バージョンにアクセスできます。
  • 新しいブラウザーの場合、実際にはページを変更せずにブラウザーの URL を更新する必要があります。window.history.pushStateこれは(こちら を参照)を使用して実現するのが最適ですが、対象ユーザーが IE を使用している場合は特に、 のサポートが非常に限られていることに注意してください。
    • 私自身は実際に使用したことはありませんが、Ajaxifyがこの問題を回避するのに役立つ非常に人気のあるプラグインであることは知っています。私が知っているようにpushState、利用可能な場合はそれを使用し、それ以外の場合は「ハッシュバン」を使用して URL を更新します。これらはTwitter や Facebookなどの大規模なサイトで非常に人気がありましたが、最新のブラウザーを使用している場合は、それらが使用されなくなったことに気付くかもしれません. 主にユーザーの履歴を適切に追跡していないため、意見が分かれる傾向がありましたが、私が知る限り、古いブラウザーの唯一のオプションです. それらについてもっと読むことをお勧めします。
  • もっと良いオプションがあるかもしれませんが、このチュートリアルでは、各リクエストの進行状況を取得する 1 つの方法を示します。
  • 最後に、ロード バーを作成するときは、jQuery を使用して素敵なスライド効果を作成するのではなく、CSS を使用transitionしてwidth. jQuerywidthは load-bar 要素の を変更するだけでよく、残りは CSS が処理します。チュートリアルを見る
于 2013-08-18T14:53:20.427 に答える