Run script before page display

I created a site that performs a bunch of calculations when loading a page (basically it determines the size of the user's screen, then assigns all the sizes and positions of the page images and applies them). The problem that I encountered is related to a slower connection, this is visible (all images start in the corner, then change and change). This is not a huge deal, but it is a kind of eyesore.

I use jquery for this and all the calculations happen on $(document).ready , are there any actions before that? Or should I use a preloader? Which one is good (queryLoader did not work for me, and all the others that I can find are only for preloading images).

Any suggestions would be much appreciated!

+4
source share
4 answers

If you're just worried about images, how about being invisible (display: none) until they are moved?

+3
source

To expand on Joe's answer, the easiest way would be to hide all the images until they are uploaded. For example, something like this:

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

You can even hide them using CSS, but I would not recommend this, unless this method still flickers a bit for you.

+2
source

How about using an iframe for your main page, and the loader page will only contain the js you need. Since both will be from the same domain, you do not have to worry about cross-restricting the domain to an iframe.

0
source

I ran into a problem in iframe environment. But currently, I have used the following workaround to avoid the hips:

 <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 fade after 15 seconds: (

0
source

All Articles