Jquery - yükleme sayfasını yavaşça ve yükleniyor gif efekti

Question

Sayfam yüklenirken yükleme yapmamaya çalışıyorum.

ne im konuşma hakkında küçük bir örnek:

<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; 
    }); 

}); 

bahsediyorsun ne im anlıyorum Umut ve yük için daha yavaş hale posible olduğunu? Demek istediğim pürüzsüz.

Answer 1

okuyabilir.

NOTLAR:

• Eğer kullanabilirsiniz sayfanın show/hide arasında geçiş istemiyorsanız eğer, bunun yerine her yeni bağlantı için aynı kodu tekrar bir olayı kullanabilirsiniz eğer daha iyi olur fadeIn().

• Birden seçicilerdeki aynı yöntemi tetiklemek için virgül ayırıcı kullanabilirsiniz: Bu yardımcı olur

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

Umut.

---

$(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 en fadein

$ (seçici) .fadeIn (hız, geri arama) kullanabilir;

Sen jQuery kullandığınız için size .fadeToggle() yerine aşağıda show() çek örnek kullanabilirsiniz daha az http://www.w3schools.com/jquery/jquery_fade.asp

ve burada http://api.jquery.com/fadein/

Answer 3

tek bir div preloader denilen oluşturabilir ve bağlantıyı tıkladığınızda o zaman hafif delay

ile içerik ve sonra fadeOut önyükleyici yüklemek fadeIn() kullanabilirsiniz

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>