• 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: #000; */
      background-position:center top;
<!-- <<<<<<<<<< PreLoader Screen CSS <<<<<<<<<< -->

<!-- >>>>>>>>>> PreLoader Screen JS >>>>>>>>>> -->
<script type="text/javascript" language="javascript">
// Hide PreLoader onLoad
rotate = 1;
function hide_preloader() { //DOM
rotate = 0;

// calculate height
var screen_ht = $(window).height();
var preloader_ht = 10;
var padding =(screen_ht/2)-preloader_ht;

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



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

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

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

Open in new window

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?
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.

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