Jquery - ゆっくりとロードGIF効果を持つページをロードします。

Question

ローディング効果でページを読み込もうとしています。

何イム話し程度の小さな例：

<a href="#" id="a1">PAGE1</a> 
<a href="#" id="a2">PAGE2</a> 
<a href="#" id="a3">PAGE3</a> 

<div id="page1">Hey this is page 1</div> 
<div id="page2">Hey this is page 2</div> 
<div id="page3">Hey this is page 3</div> 

のjQuery：

$(document).ready(function(){ 

    $("#page1").hide(); 
    $("#page2").hide(); 
    $("#page3").hide(); 

    $("#a1").click(function(){ 
     $("#page1").show(); 
     return false; 
    }); 

    $("#a2").click(function(){ 
     $("#page2").show(); 
     return false; 
    }); 

    $("#a3").click(function(){ 
     $("#page3").show(); 
     return false; 
    }); 

}); 

はあなたが話して何イム理解してほしい、それが負荷のためにそれを遅くするためにとりうるのですか？私は滑らかです。

Answer 1

を読むことができます。

NOTES：

• あなたが使用できるページのshow/hideを切り替えるにはしたくない場合は、すべての新しいリンクの同じコードを繰り返すのではなく、一つのイベントを使用することができればそれが良いでしょうfadeIn()。

• あなたは、複数のセレクタで同じメソッドをトリガするためにカンマ区切りを使用することができます。

  $("#page1,#page2,#page3").hide(); 
  

は、この情報がお役に立てば幸いです。あなたは1つのdiv要素を作成することができます

---

$(function(){ 
 
    $("#page1,#page2,#page3,#loading").hide(); 
 

 
    $("a").click(function(e){ 
 
    e.preventDefault(); 
 
    $('#loading').show(); 
 

 
    switch($(this).attr('id')){ 
 
     case 'a1': 
 
     $("#page1").fadeToggle("slow",function(){ $('#loading').hide() }); 
 
     break; 
 
     case 'a2': 
 
     $("#page2").fadeToggle(2000,function(){ $('#loading').hide() }); 
 
     break; 
 
     case 'a3': 
 
     $("#page3").fadeToggle("fast",function(){ $('#loading').hide() }); 
 
     break; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="loading" src="http://www.tbaf.org.tw/event/2016safe/imgs/loader1.gif" width="250"> 
 
<a href="#" id="a1">PAGE1</a> 
 
<a href="#" id="a2">PAGE2</a> 
 
<a href="#" id="a3">PAGE3</a> 
 

 
<div id="page1">Hey this is page 1</div> 
 
<div id="page2">Hey this is page 2</div> 
 
<div id="page3">Hey this is page 3</div>

Answer 2

$(document).ready(function() { 
 

 
    $("#page1").hide(); 
 
    $("#page2").hide(); 
 
    $("#page3").hide(); 
 
    $("#loadingGif").hide(); 
 

 
    function anim(id) { 
 
    $("#loadingGif").show(); 
 
    setTimeout(function() { 
 
     $("#loadingGif").hide(); 
 
     $(id).fadeIn("slow"); 
 
    }, 400) 
 
    } 
 
    $("#a1").click(function() { 
 

 
    anim("#page1"); 
 
    return false; 
 
    }); 
 

 
    $("#a2").click(function() { 
 
    anim("#page2"); 
 
    return false; 
 
    }); 
 

 
    $("#a3").click(function() { 
 
    anim("#page3"); 
 
    return false; 
 
    }); 
 

 
});

#loadingGif { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: fixed; 
 
    top: 100px; 
 
    left: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="a1">PAGE1</a> 
 
<a href="#" id="a2">PAGE2</a> 
 
<a href="#" id="a3">PAGE3</a> 
 

 
<div id="page1">Hey this is page 1</div> 
 
<div id="page2">Hey this is page 2</div> 
 
<div id="page3">Hey this is page 3</div> 
 

 
<img id="loadingGif" src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif" width="200" height="200" />

あなたはjQueryのフェードイン

$（セレクタ）.fadeIn（スピード、コールバック）を使用することができます。

あなたはjQueryのを使用しているので、あなたが.fadeToggle()代わりに以下show()チェック例を使用することができ、よりにhttp://www.w3schools.com/jquery/jquery_fade.asp

、ここhttp://api.jquery.com/fadein/

Answer 3

はpreloaderと呼ばれ、あなたがリンクをクリックしたとき、あなたは、あなたがあなたのコンテンツをロードfadeIn()を使用すると、わずかdelay

と、あなたfadeOutプリローダーすることができます

var preloader = $('.preloader'); 
 
preloader.hide(); 
 

 
$('a').click(function() { 
 
    var target = $(this).data('target'); 
 
\t 
 
    preloader.fadeIn(function() { 
 
    $(target).siblings().css('opacity', 0); 
 
    $(target).css('opacity', 1); 
 
    }).delay(1500).fadeOut(); 
 
});

.preloader { 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    left: 0; 
 
    top: 0; 
 
    background: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 

 
.content { 
 
    opacity: 0; 
 
    transition: all 0.4s ease-in; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-target="#page1">PAGE1</a> 
 
<a href="#" data-target="#page2">PAGE2</a> 
 
<a href="#" data-target="#page3">PAGE3</a> 
 

 
<div class="content-container"> 
 
    <div class="content" id="page1">Hey this is page 1</div> 
 
    <div class="content" id="page2">Hey this is page 2</div> 
 
    <div class="content" id="page3">Hey this is page 3</div> 
 
</div> 
 

 
<div class="preloader"> 
 
    <img src="https://d13yacurqjgara.cloudfront.net/users/12755/screenshots/1037374/hex-loader2.gif" alt=""> 
 
</div>