Javascript Animated Gif Forwarding
i have the following code and got the following problem: i would like to have an animated gif to show up on loading a page. after 3 seconds i would like to disable the gif and show
Solution 1:
You should add it as a variable.
var loadingGif = function(){
document.getElementsByClassName('loading').style=display:none;
document.getElementsByClassName('msg').style=display:block;
}
setTimeout('loadingGif()', 3000); //change the opacity of the loading gif to 0 after 3 seconds, and then load the message block.I would also recommend using jQuery to expand options and tighten things up.
var loadingGif = function(){
$(".loading").delay(3000).hide('100', function(){
$(".msg").css({"display" : "block" });
}); //after 3 seconds animate the div to display:none; in 1/10th of a second
}
Make sure that .loading is set to display:block, and .msg is set to display:none.
Solution 2:
For example, initially, set
.visible { display: block; }
.hidden { display: none; }
<divid="loading"class="visible"><imgsrc="loading/loading40.gif" /></div><divid="message"class="hidden"><?phpecho$_SESSION['message']; ?></div>then change the css via javascript in your downcount function
functiondowncount(){
document.getElementById('loading').className = 'hidden';
document.getElementById('message').className = 'visible';
}
Solution 3:
You can use the CSS display:none/block
<body><scripttype="text/javascript">var counter = 3;
var url ="";
functiondowncount() {
document.getElementById('digit').firstChild.nodeValue = counter ;
if (counter == 0 ) {
document.getElementById('loading').style.display = 'none';
document.getElementById('msg').style.display = 'block';
} else {
counter--;
window.setTimeout('downcount()', 1000);
}
}
window.onload=downcount;
</script><divid="loading"><imgsrc="loading/loading40.gif"
</div><divid="msg"style="display:none"><?PHPecho$_SESSION['msg'];?></div></body>
Post a Comment for "Javascript Animated Gif Forwarding"