jQuery-缓慢加载页面并加载gif效果

Question

I'm trying to make my page loads with loading effect.

A small example about what im talking:

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

});

Hope you understand what im talking about, and is it posible to make it slower for load? I mean smooth.

Answer 1

 $(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" /> 

You can use Jquery's fadeIn

$(selector).fadeIn(speed,callback);

You can read more at http://www.w3schools.com/jquery/jquery_fade.asp

and here http://api.jquery.com/fadein/

Answer 2

Because you're using jQuery you could use .fadeToggle() instead of show() check example below.

NOTES :

• It's better if you could use one event instead of repeating the same code for every new link, if you don't want to toggle between show/hide of the page you could use fadeIn() .

• You could use comma separator to trigger the same method on multiple selectors :

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

Hope this helps.

---

 $(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 3

You can create one div called preloader and when you click on link you can use fadeIn() then you load your content and then you fadeOut preloader with slight delay

 var preloader = $('.preloader'); preloader.hide(); $('a').click(function() { var target = $(this).data('target'); 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>