jquery - 缓慢加载页面并加载gif效果
我试图让我的页面加载加载效果。jquery - 缓慢加载页面并加载gif效果
什么IM谈论一个小例子：
<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;
});
});
希望大家明白说什么IM，是不是更多钞票，使其慢负载？我的意思是顺利。
由于您使用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>
$(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（速度，回调）;
你好先生，但我怎么才能启动它与加载图像时，点击链接然后淡入淡出？ – script0r
已编辑添加gif。看看 –
您可以创建一个DIV叫preloader，当你点击链接，您可以使用fadeIn()然后加载您的内容，然后你fadeOut预装有轻微delay
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>
以及如何插入加载gif？在淡入淡出之前？ – script0r
检查我的更新，如果你可以使用'fadeToggle（）'回调来隐藏加载gif，那么你可以像你想要的参数速度（参见我的示例）和gif遵循使用的动画。 –
merci wld bladi :) – script0r