6

したがって、メインページに次のような jQuery ページプリローダーがあります。

<script type="text/javascript">
    $(window).load(function() {
        $("#preloader").delay(700).fadeOut("slow");
    })


<div id="preloader" class="preloader"></div>

これは 4 回表示されます。

  1. ドメイン名でサイトに入ると、
  2. F5 キーでメイン ページを更新すると、
  3. ロゴをクリックすると（クリックしたときにメインページに移動する必要があります）;
  4. «ホーム»メニュー項目をクリックすると。しかし、最初の2回だけ見せたいです。それで、私の頭に浮かんだ最初のアイデアは、divクラスを削除して、JSでロゴやメニュー項目をクリックしたときにページ全体にプリローダー画像を表示しないようにすることです。そしてこれを使用しました：

document.getElementById("プリローダー").className = 'test';

しかし、その後...メニュー項目をクリックしてメインページを再度ロードすると、ドキュメントの新しいコピーが作成されるため、プリローダーが再びクラスを持ち、表示されることに気付きました。そこで、AJAX を使用し、メニュー項目やロゴをクリックしてページ全体をリロードしないことにしました。今私はこれを使用します：

     <script type="text/javascript">
        $(document).ready(function(){
             $("#blog, #logo").click(function(){
                 $("#container").load("/blog");
                 document.getElementById("preloader").className = 'test';
             });
        });
    </script>

そのため、ロゴまたはメニュー項目をクリックすると、«blog» というカテゴリがコンテナーに読み込まれます。そして、私のサイドバーは次のようになります。

...        
<a href="javascript:;" id="logo"><i class="logo"></i></a>
...
<li class="m_blog"><a id="blog" href="javascript:;"><i class="icon"></i>Blog</a></li>
...

だから、それは動作します！プリローダーは、ドメイン名からサイトを開いたときにのみ表示されます。しかし、1つの問題が発生します。カテゴリ«video»を開くと、次のようなアドレスがあります：mysite.com/video/

そして、ロゴやメニューからメインページに戻ったとき、私は同じアドレスを持っています! ページ全体をリロードせずにコンテンツをロードしても、アドレスは変わらないためです。どうすれば修正できますか？お願い助けて！プリローダーを 1 回だけ表示したいだけです。ドメイン名にアクセスしたとき、またはメイン ページを F5 キーで更新したときです。私は HTML と CSS しか知らないので、すでにめまいがしますが、今日から AJAX と jQuery を学び始めます。この件で私を助けてください。

4

2 に答える 2

2

だから、私は自分で問題を解決しました。とにかく、正しい方法で考えるのを手伝ってくれた @prabeen-giri に感謝します。まず、プリローダーの仕組みについて説明する必要があります。CSSを見てください：

position: fixed;
display: block;
top: 0;    /* making preloader cover all screen */
right: 0;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background-position:center; center;
background-size: auto auto;
background-image: url(../images/preload.png); /* your picture should be here */
background-color:#000; 
z-index:99; /* must be the highest number of all others to cover them all */

したがって、プリローダーは、すべてのウィンドウをカバーし、コンテンツ全体が読み込まれると (jQuery によって) スムーズに消える画像またはその他のものです。

<div id="preloader" class="preloader"></div>

そして、ここにスクリプトがあります：

<script type="text/javascript">  
     $(window).load(function() {
          $("#preloader").delay(700).fadeOut("slow");}); 
</script>

私の問題を解決し、ドメイン名でサイトに入るときにプリローダーを 1 回だけ表示するには、Cookie を使用する必要があります。2 つの Cookie ヘルパー関数があります ( Quirksmodeから):

function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

そのため、スクリプトを実行するための条件を作成するために、独自の Cookie を入力する必要があります。最初は、作成された Cookie はnullに等しく、この等価性はスクリプトを実行するための条件になります。その後、jQuery を再起動しないように cookie に何らかの値を設定します。コードは次のとおりです。

<script type="text/javascript">  
    $(window).load(function() {
        if (readCookie('referer') == null){
            $("#preloader").delay(700).fadeOut("slow");}
        createCookie('referer',1,0);
     }); 
</script>

しかし、ページを更新した後にプリローダーの画像と背景を削除するにはどうすればよいでしょうか? 条件によってjQueryのfadeOutプロセスを無効にするだけだからです。画像と黒い背景がウィンドウを覆い続け、消えることはありません...

新しい条件を作成して配置しましょう

<script>
    if (readCookie('referer') == null) {
        document.write("<style>.preloader {background-image: url(../images/preload.png); background-color:#000; z-index:99;}</style>");
    }
</script>

これにより、画像、z-index、および背景をプリローダー クラスに設定します。私たちの Cookie は、ユーザーがドメイン名を介してサイトにアクセスした場合、またはCookie をクリアしてページを更新した場合にのみnullになります (これはありそうもないことです)。上記で設定したようにcookie が1に等しい場合、プリローダーは表示されますが、画像と背景は表示されず、jQuery フェードアウトも実行されません! したがって、私の問題は解決しました。プリローダーは一度だけ表示されます。@prabeen-giriに改めて感謝します！

于 2013-04-14T19:27:04.403 に答える