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

});

希望你能明白我在说什么，是否可能使其加载更慢？我的意思是更平滑。

- script0r

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

你可以使用jQuery的fadeIn。

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

你可以在这里阅读更多：http://www.w3schools.com/jquery/jquery_fade.asp 以及这里：http://api.jquery.com/fadein/

- Sujeet Jaiswal

---

您好，但是当链接被点击后如何开始加载图片然后淡入呢？ - script0r

Answer 2

因为您正在使用jQuery，所以可以使用.fadeToggle()代替show()，请查看下面的示例。 注意：

• 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();
  

希望这有所帮助。

---

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

- Zakaria Acharki

---

如何在淡入之前插入加载动画？ - script0r

请检查我的更新，如果你能使用fadeToggle()回调来隐藏加载动画，那就更好了，这样你可以根据需要设置速度（参见我的示例），并且动画与所使用的gif相匹配。 - Zakaria Acharki

merci wld bladi :) - script0r

Answer 3

你可以创建一个叫做preloader的

，当你点击链接时，你可以使用fadeIn()来加载内容，然后在稍微延迟一下后使用fadeOut来隐藏preloader。

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>

- Nenad Vracar