CODEWITHSUNDEEP
javascriptjquerycssjquery-events
goddamnyouryan
goddamnyouryan

Reputation: 6906

Running a script before the page is displayed

I've built a site that does a bunch of calculations as the page loads (basically it determines the users screen size, then assigns all of the page images sizes and positions and applies them). The problem I am having is on a slower connection, this is visible (all of the images will start in the corner, then resize and reposition). This isn't a huge deal, but it's kind of an eyesore.

I'm using jQuery to do this, and all the calculations are happening on $(document).ready, is there someway to do this before then? Or should I use a preloader? What's a good one (queryLoader wasn't working for me, and all the other ones I can find are all just for preloading images).

Any suggestions would be much appreciated!

Upvotes: 4

Views: 172

Answers (4)

Christian
Christian

Reputation: 19750

To expand on Joe's answer, the easiest way would be to hide all images until they've loaded. Eg something like this:

$(function() {
  $('img').hide();
  $('img').load(function() { $(this).show() });
});

You could even pre-hide them with CSS, but I wouldn't recommend that unless the above method still flickers a bit for you.

Upvotes: 2

Awan
Awan

Reputation: 159

I faced the issue within iframe environment. But currently i used the following workaround to avoid eyesore :

<style>
   .load_class{
            display:block;
            position:absolute;
            top:0;left:0;
            background-color:#fff;width:100%;height:100%;
            z-index:9990;
            text-align:center;
        }
</style>
<script>
   setTimeout("loadingComp()",15000);

   function loadingComp(){
        jQuery("#i_init").fadeOut();
    }
</script>
<div id="i_init" class="load_class">
 <img src="images/loading.gif" alt="Loading..."/>
             Loading...
</div>

but this is a hard-code solution. a div will be fade out after 15 sec :(

Upvotes: 0

ShadyKiller
ShadyKiller

Reputation: 710

How about using an iframe for your main page and the loader page would just contain the js you need. Since both will be from same domain , you wont have to worry about cross domain restriction on iframe.

Upvotes: 0

Joe Enos
Joe Enos

Reputation: 40413

If you're just worried about the images, how about styling them to be invisible (display: none) until after they've been repositioned?

Upvotes: 3

Related Questions