3

jQueryプログレスバーがあります。PHP、CSS、JavaScriptなどを含むHTMLページの読み込みをプログレスバーに表示する方法はありますか？

プリローダーのように、ページがダウンロードされて完全にレンダリングされたら、それを表示します。

プログレスバーがない場合、jQueryでプリローダーを作成できますか？

4

3 に答える 3

3

私が見つけたものを見て

jQueryプリローダーとここにデモがあります

于 2010-08-30T02:03:57.607 に答える
2

最も簡単でセクシーな方法：

ページの中央にある読み込みアイコンを除いて、DOM の準備が整うまですべてのコンテンツを非表示にします。次に、コンテンツがロードされたら、ロード アイコンを削除します。

このようなもの：

                jQuery(function( $ ){
                        function preLoad() {
                            $("#content").addClass("hidden");
                        }

                        function loaded() {
                            $("#content").removeClass("hidden");
                            $('div#preLoader').css({display:'none'}).remove();
                        }

                        preLoad();
                        window.onload=loaded;
                });

編集: #preLoader の背景画像として配置するには、 ajax ローダーgifが必要です。

于 2010-08-30T06:15:07.043 に答える
2

一度..これを作成しようとしましたが、きれいではありませんでした。ページに必要なものをすべてリストし、ロードされるにつれて進行状況バーを 1 つずつ増やしました。とてもとてつもなく長い鎖でした。ここに私がしたことのサンプルがあります。

$.getScript('js/lib/ui.js',function() { //Load the Jquery UI
    //Call back function after the loading is complete

    $("#progressinfo").html("Loading Widgets ..."); //Give the information 

    $.getScript('js/lib/widget.js',function() { // Load the jquery ui Widget
    //Call back function after the loading is complete

        $("#progressinfo").html("Loading Widgets: Progress Bar ..."); // Inform

        $.getScript('js/lib/widgets/progressbar.js',function() { // Finally load the Jquery UI progressbar
            //Call back function after the loading is complete

            $("#progressbar").progressbar({ value: 5 }); // change the value of the UI informing the total amount of loadding completion                                             
            $("#progressinfo").html("Loading Widgets: some script ..."); //Inform of another script

            $.getScript('somescript.js',function() { // Load another script
            //Call back function after the loading is complete

               $("#progressbar").progressbar({ value: 6 }); // change the value of the UI informing the total amount of loadding

            });
        });
    });    
});
于 2010-08-29T15:31:46.737 に答える