Jquery - load page with slowly and with loading gif effect

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.

Zakaria Acharki · Accepted Answer · 2016-04-03 18:56:24Z

1

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>

edited Apr 3, 2016 at 18:56

answered Apr 3, 2016 at 18:30

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

script0r Over a year ago

and how to insert loading gif?? before the fadein??

Zakaria Acharki Over a year ago

Check my update, better if you could use fadeToggle() callback to hide the loading gif so you could parameter the speed like you want (see my example) and the gif follow the used animation.

script0r Over a year ago

merci wld bladi :)

Sujeet Jaiswal · Accepted Answer · 2016-04-03 18:38:17Z

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/

edited Apr 3, 2016 at 18:38

answered Apr 3, 2016 at 18:19

Sujeet Jaiswal

1,0897 silver badges12 bronze badges

1 Comment

script0r Over a year ago

hello sir, but how can i start it with loading image when the link is clicked then fadein??

Nenad Vracar · Accepted Answer · 2016-04-03 18:57:17Z

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>

Collectives™ on Stack Overflow

Jquery - load page with slowly and with loading gif effect

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related