I am trying to hide an image/div using display:none until the page loads, then it will slide in from page left. How do I get the image to show once the page is loaded and not take up space on the page before so. See: http://jsanim.com/ for example (pretend like the left cloud is 'bunny'.) A new kid thanks you for your help!
function init(){
var manager = new jsAnimManager();
bunnyFly = document.getElementById("bunny");
manager.registerPosition("bunny");
bunnyFly.setPosition(-1320,100);
var anim = manager.createAnimObject("bunny");
anim.add({property: Prop.position, to: new Pos(320,100),
duration: 2000});
anim.add({开发者_运维技巧property: Prop.positionCircle(false), loop:-1, to: new Pos(-300,150), duration: 3000}); }
This is quite simple, just register the window
object's onload
event handler:
function init() {...}
window.onload = init;
The Window
object in the DOM has an onload
member of type Function
that will get invoked when the corresponding Window
is finished loading.
If you're using jQuery
, you can use the document.ready
event:
$(document).ready(init);
EDIT: You can access the window
object from anywhere in your JavaScript code - it is a global object. You can indeed do this in a linked file via a <script>
tag:
Blah.js:
function init() {
//your code here...
}
window.onload = init;
//or
$(document).ready(init);
index.html:
<!doctype html>
<html>
<head>
...
<script src="Blah.js"></script>
</head>
<body>
...
</body>
</html>
Just wrap your code in
$(document).ready(function () {
//put your code here
$("#divId").slideDown(); //just an example, use your code for slideLeft
});
精彩评论