Show spinner image before loading DIV
Question
I have tried to work this out but not getting anywhere with it. Basically I would like my custom spinner loader image to appear first for few seconds then it fades out and then the Div with id=home should then fadeIn with all its contents.
I have tried several approach but not close to desired result. If there is any useful link that would help please post link.
My HTML page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css"/>
<link rel="stylesheet" href="css/mytheme.min.css" />
<link rel="stylesheet" href="css/structure-1.3.2.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/myscript.js"></script>
</head>
<body>
<div class="css-loader-icon"><img src="css/images/loader.gif"/></div>
<!-- Page: home -->
<div id="home" data-role="page" data-position="fixed" data-theme="a" data-title="My first app">
<div data-role="navbar" data-mini="true">
<ul>
<li><a href="#home" class="css-hnav" >Home</a></li>
<li><a href="#home" class="css-hnav" >Contact</a></li>
</ul>
</div><!-- navbar -->
<div data-role="content" class="css-listview">
<ul class="css-ul-list">
<a href="#blog" data-role="button" data-mini="true">My Blogs</a>
<a href="#tweets" data-role="button" data-mini="true">Tweet with me</a>
</ul>
</div>
</div><!-- page -->
JS:
$(function() {
$(".css-loader-icon").fadeOut(2000, function() {
$("#home").fadeIn(1000);
});
});
CSS:
.css-loader-icon {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#content {display:none;}
1 answers
solution1
0 ACCPTED 2013-11-17 22:32:38
Well try with loader icon displaying instead of hiding it in CSS and hiding #home div.
display:none;
#home{ display:none;}
Then your js will hide loader gif after 2 secs and show #home div. As gif is already hidden you are not able to feel the effect.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.