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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您可以使用Jquery的fadeIn

$（选择器）.fadeIn（速度，回调）;

您可以在http://www.w3schools.com/jquery/jquery_fade.asp

了解更多信息

和http://api.jquery.com/fadein/

Answer 2

因为您使用的是jQuery，所以您可以使用 .fadeToggle() 代替show()检查示例。

注意：

如果您不想在每个新链接上使用相同的代码，如果您不想在可以使用的show/hide页面之间切换fadeIn()，那么最好
您可以使用逗号分隔符在多个选择器上触发相同的方法：
```
$("#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>

Answer 3

您可以创建一个名为preloader的div，当您点击链接时，可以使用fadeIn()然后加载内容，然后加载fadeOut预加载器并使用delay < / p>

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>

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

3 个答案: