Convert from <body onLoad... > to $(document).ready()

Hey, Experts;

I've found a page pre-loader I really like but it's set up to hide using an onLoad event in the body tag. Problem is that the pre-loader hides before the page has fully loaded. I've been told that the $(document).ready() function is a better way to go, as far as the whole page loading before the hide_preloader(); goes into effect. I don't know how to make the transition though, from the <body ...> tag to  the $(document).ready() script. Could I get a bit of help with how to write that?

Thanks. Script is below.

Cayce

<!-- >>>>>>>>>> PreLoader Screen JS >>>>>>>>>> -->
<script type="text/javascript" language="javascript">
// Hide PreLoader onLoad
rotate = 1;
function hide_preloader() { //DOM
rotate = 0;
$("#preloader").fadeOut(1000);
}

$(document).ready(function(){
// calculate height
var screen_ht = $(window).height();
var preloader_ht = 10;
var padding =(screen_ht/2)-preloader_ht;
$("#preloader").css("padding-top",padding+"px");

// loading animation using script
      function anim(){ $("#preloader_image").animate({left:'-1400px'}, 8000,
      function(){ $("#preloader_image").animate({left:'0px'}, 5000 ); if(rotate==1){ anim();}  } );
      }
      anim();
});
</script>
<!-- <<<<<<<<<< PreLoader Screen JS <<<<<<<<<< -->

</head>

<body onload="hide_preloader();">

<div id="preloader"></div name="preloader">
dcayceAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
you can use :
$(window).load(function() {
// your code here
})
instead $(document).ready(function()  { // your code here });
Or again :
window.onload = function() {
// your code here
}
0
 
dcayceAuthor Commented:
Ok... where it says, "// your code here", would I put hide_preloader();? As in:

$(window).load(function() {
hide_preloader();
})

And which of the three choices would be most effective?

Thanks.
0
 
leakim971PluritechnicianCommented:
if previously you had : <body onload="hide_preloader();"> that is.

>$(window).load(function() {
If you want o stay with jQuery level use : $(window).load(function() {
0
 
dcayceAuthor Commented:
Looks good so far. This is what I've got, and it seems to be working:

<body>

<script type="text/javascript" language="javascript">
$(window).load(function() {
hide_preloader();
})
</script>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.