• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 675
  • Last Modified:

Force Load Order of a Page Element

Hello again, Experts;

I have a web page pre-loader I've gotten to work well and am happy with. It's a jQuery/CSS combination, and because the pre-load graphic is assigned to a Div in the body, some of the page elements begin loading ahead of the pre-loader. Is there a way of forcing a particular element, like this pre-loader, to get priority in the load sequence?

This is the Pre-Loader script:

<!-- >>>>>>>>>> PreLoader Screen CSS >>>>>>>>>> -->  
<style type="text/css">
#preloader {
      background-image:url(images/bkg_parchment.jpg);
      /* background: #000; */
      background-repeat:no-repeat;
      background-position:center top;
      position:fixed;
      left:0px;
      top:0px;
      width:100%;
      height:100%;
      text-align:center;
      color:#fff;
      z-index:1000;
}
</style>
<!-- <<<<<<<<<< PreLoader Screen CSS <<<<<<<<<< -->

<!-- >>>>>>>>>> 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>

<script type="text/javascript" language="javascript">
$(window).load(function() {
hide_preloader();
})
</script>

<div id="preloader"></div name="preloader">
0
dcayce
Asked:
dcayce
1 Solution
 
leakim971PluritechnicianCommented:
to load it first, put it just after the body tag

<body>
<div id="preloader"></div>

Open in new window

0
 
Tom BeckCommented:
How about putting the preloader on the page by itself, then on animation complete (preloader done), use ajax to bring the rest of the content, from a separate source page, into a div wrapper?
0
 
Julian HansenCommented:
Hide the rest of the page and add a load event handler for the preLoader image - when it is complete show the rest of the page.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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