web-dev-qa-db-ja.com

パーセンテージでプリロード-javascript / jquery

Googleで検索しましたが、パーセンテージで読み込みを行う方法が見つかりません。誰が私がその例を見つけることができるか知っていますか？

コンテンツを表示する前に、バーなしの0〜100のWebサイトのプリロードが必要ですが、例を見つけることができません。

javascriptjqueryloadingprogress
19
anvd

コンテンツが完全に読み込まれたときにのみコンテンツを表示する場合は、次の2つのオプションを試してください。

1）すべてのコンテンツを<div id="wrapper" style="display:none;"></div>タグで囲み、ロード完了イベントで次のように表示します。

$(function(){
    $("#wrapper").show();
});

2）これでも目的が解決しない場合は、空のページをロードし、ajaxを使用してコンテンツを取得できます。

$(function(){
    $.ajax({ 
        .......//AJAX params
        .......
        success:function(msg){
                    $("#wrapper").html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
                });
});

編集： gayadesign が提供するqueryLoaderスクリプトを使用して、いくつかの成功を達成できました：D

queryLoader.jsファイルを127行目から151行目まで変更する必要がありました。変更されたスクリプトは次のとおりです。自分で試してみてください。

$(QueryLoader.loadBar).css({
        position: "relative",
        top: "50%",
        font-size:40px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    });
},

animateLoader: function() {
    var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
    if (perc > 99) {
        $(QueryLoader.loadBar).stop().animate({
            width: perc + "%"
        }, 5000, "linear", function() {
                $(this).html("<strong>100%</strong>");//MY EDIT
                QueryLoader.doneLoad();
            });
    } else {
    $(QueryLoader.loadBar).stop().animate({
        width: perc + "%"
    }, 5000, "linear", function() {
            //MY EDIT
            $(this).html("<strong>"+Math.round(perc)+"%</strong>");
        });
    }
},
12
TheVillageIdiot

このプラグインをお勧めします。 http://demo.inwebson.com/download/jpreloader.Zip からのすばらしいダウンロード---ここで実際に見る http://www.inwebson.com/demo/jpreloader/ =

<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
  $(document).ready(function() {
  $('body').jpreLoader();
    });
// ]]></script>

新しいバージョンjpreloader 2.1へのリンクはこちら http://demo.inwebson.com/download/jpreloader-v2.Ziphttp://www.inwebson.com/demo/jpreloader -v2 /

17
elin3t

できません。

ZzzzBovが言ったように、コンテンツの量やコンテンツのサイズはわかりません。

次のようなものを使用して、「偽造」することができます（たとえば、画像を使用しています）。

var percentCounter = 0;

$.each(arrayOfImageUrls, function(index, value) {
    $('<img></img>').attr('src', value)    //load image
        .load(function() {
            percentCounter = (index / arrayOfImageUrls.length) * 100;    //set the percentCounter after this image has loaded
            $('#yourProgressContainer').text(percentCounter + '%');
        });
});

前述したように、これはロードするサイトの真の割合ではありませんが、各イメージがほぼ同じサイズであると仮定して、ロードしたイメージの大まかな見積もりです。

7
elwyn

このプロジェクトを参照してください。それはあなたがうまくやりたいことをします。

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

デモはここでホストされています

http://www.gayadesign.com/scripts/queryLoader/

ここからダウンロードしてください

http://www.gayadesign.com/scripts/queryLoader/queryLoader.Zip

2
esafwan