Hide content of page in IE until scripts are totally loaded in jquery

Question

Hide content of page in IE until scripts are totally loaded in jquery

2.5k views Asked by ian_6500 At 10 February 2011 at 19:13

IE harshing my mellow...

I don't want the jquery-controlled content of my page to display until jquery displays it. But in Internet Explorer, 7 and 8, the content blinks into view before jquery takes it over. I've tried $(window).load and $(document).ready functions, but I still have the same problem.

Specifically, I don't want my text to appear until Cufon displays it and I don't want my page #field to display until curvey corners has rounded off the corners. Also, I have jquery cycle slideshows and all of the content of the slideshows displays all at once briefly.

One solution, but I'm not particularly keen on it, is to have the whole darn page fade in really fast with:

$(window).load(function(){$("#field").fadeIn(0);});

Even though the time is set to 0ms, this still works to make all the hidden content stay hidden until jquery displays it. But the down side is is that it makes the pages blink when navigating between them. (I'm playing with the duration, but with IE, it just makes the pages be blank longer--I have never, ever, been able to get anything to fade in in IE with jquery).

Here's the most involved page:http://ianmartinphotography.com/test-site/testimonials/index.html About and the main (home) index page in the top directory are up and running, I'm still working on the other stuff... Thanks!

Original Q&A

There are 7 answers

Brandon On 10 February 2011 at 19:16

Would it be possible to style the elements in question with display:none; or visibility:hidden; with CSS, and then when the page loads use jQuery to show those elements?

Daniel On 10 February 2011 at 19:16

One technique you could utilize would be to add the following in the <head> of your document.

<script>
document.documentElement.className = "js";
</script>

Then you could use CSS to make sure the elements are definitively hidden before showing them with JavaScript

.js .some-element {display: none;}

This also degrades gracefully if JavaScript for some reason does not work.

Piskvor left the building On 10 February 2011 at 19:17

Try conditional comments:

<!--[if IE]>
  <style>
    body {
     display: none;
    }
  </style>
<![endif]-->

and onload, remove this through script:

<script>
  $(window).load(function(){$('body').css('display:block');});
</script>

If you want functionality when browser is IE and JS is off (progressive enhancement is Good), the first code block will get slightly more complex:

<head>
<!--[if IE]>
  <style>
    body {
     display: none;
    }
  </style>
  <noscript>
    <style>
     body {
       display: block !important;
     }
    </style>
  </noscript>
<![endif]-->

This will hide the body, but only when JS is on (as the second style block will override the first in case JS is off).

ian_6500 On 13 February 2011 at 18:07

So, I'm just doing what I've been doing, what I mentioned in my question, just have the page fade in with jQuery which gives IE a fraction of a second to get its act together before displaying my Javascript-driven stuff. I've been using:

$(window).load(function(){$("THE DIV CONTAINING MY PAGE").fadeIn(0);});

...and will continue to do so. @alex provided a solution in his answer having all of the html fade in. That might work too, (I haven't tested it on the page in question specifically, but I still prefer my more localized fade-in as his method makes everything fade in, including the background color. I could see that being really cool on another site, but that look isn't quite right for me on this site...)

@Marc B suggested a very elegant solution in a comment under my question. I've invited him to restate it as an answer and if it works (and no one provides a better idea in the meantime,) I'll green-check him. (I'm thinking it'll work--I'll try it out next time I'm in front of my windows machine...)

If anyone else has any other ideas, I'd love to see them!

Hussein On 10 February 2011 at 19:41

<html lang="en" class="hideshow">

or

<html lang="en" style="display:none">

set it to display none, either inline style"display:none" or in your css file

You have jquery in your question tags, so i assume you are using jquery. If so, you can put this in your document ready function

$(function(){
$('.hideshow').fadeIn("slow").show();
});

or for the second one use.

$(function(){
$('html').fadeIn("slow").show();
});

Check it out at http://jsfiddle.net/NtCKn/

red On 10 February 2011 at 19:44

Settings CSS style display: none; to the Body or your wrapper element works well. Keep in mind, that some things don't always render well when hidden with display: none; In those cases you might need to use visibility: hidden; and then bring the element back to sight with visibility: visible; fadeIn() won't work for that, but a workaround is to .hide() -> visibility: visible and then .fadeIn() after document ready :)

**ian_6500** · Accepted Answer · 2011-02-17 01:31:55

@Marc B deserves the credit for this; I waited for three days so he could post his own version of the answer so I could green-check him.

Here's the final and tested code:

<script type="text/javascript">
 $(document).ready(function(){
 $("THE DIV CONTAINING MY PAGE").css('display', 'block');
 });
</script>

Very simple and effective.

TechQA.

Hide content of page in IE until scripts are totally loaded in jquery

There are 7 answers

Related Questions in JQUERY

Related Questions in CUFON

Related Questions in JQUERY-CYCLE

Popular Questions

Popular Tags

Trending Questions