[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 843
  • Last Modified:

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">
0
dcayce
Asked:
dcayce
  • 2
  • 2
1 Solution
 
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now