Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Lee Crockford
Lee Crockford
9,196 Points

Hiding Elements after the DOM is loaded...

Hi, this might be a little beyond the level we're at at the moment, but I was wondering if anyone had any suggestions, advice or feedback on the "quick flash" of elements that are loaded by the DOM, then hidden by .hide().

In this video you can see the "warning" ever so briefly appear before the Javascript hides it. (On a side note, I've used "wow.css" and its javascript on other projects before - and it does the same thing: All items that are hidden by jquery initially appear for a split second).

Any best practice for eliminating this? Cheers

Hi Lee,

I'm curious about how you are implementing wow js as its only about 8k minified. You mentioned hiding elements with Jquery so maybe the flash you are seeing is actually the delay from loading jquery and waiting for document.ready to fire?

Lee Crockford
Lee Crockford
9,196 Points

Hi James Deagle !

I'm currently including the wow.js at the closing of the body tag. Here's an example of one website I've used it in: howistheworldfeeling.spurprojects.org. (are we allowed to post external links here? Apologies if not).

As you can see, there's that half a second where the content loads, then disappears once the js kicks in...

If you have any further feedback, I'd love to hear it/

2 Answers

Two ways you could do this (might need to play around with it to see which result you like best).

You could in the document.ready function just call the element.hide(); That would hide the element as soon as the document has loaded (but I am not sure if it would flash up first you would have to test that). The other theory I have that might delay it more is to do with classes. In your css you could have a class called .hidden{ display: none; }

And then on the document.ready(); you would have to use .addClass("hidden"); to the element you want hidden.

Hope this helps

Lee Crockford
Lee Crockford
9,196 Points

Thanks Andrew :) I'll have a play around! I assume if it's for self-created animations, it's probably really easy to avoid the "flash" based on your help. It'll be interesting to see how it goes with something like wow.css which has pretty complex animations and whether it interferes....

Again, cheers :)

So based on the link you sent over, there are couple things contributing to the flashing. Part of it has to do with load optimization and limiting the amount of requests being made. A lot of these js and css files could be bundled into a single file and minimized. If you checkout the screen shot of the network timeline, you can see there is about a half second before wow js loads (even though all the other files that load are tiny). Minimizing the amount of request

howistheworldfeeling Screen Shot 2016-08-12 at 8.07.48 AM.png

I noticed in your html tag you have the "no-js" class even after the page is loaded. This is usually used in conjunction with Modernizr so that you can apply separate styles to the page when JS isn't enabled. The trick here being that you need Modernizr (or some other js) to toggle the "no-js" class to "js" when js is enabled.

So piggybacking off of Andrew Taylors answer, once you are able to set styles based on js being enabled you could create a css rule for hiding all wow js enabled elements. This way its just pure css and your not having to modify the dom once the page has loaded. This way you are making the elements hidden by default only when JS is enabled. If js is disabled, your element will display as intended by default.

.js wow {
  visibility: hidden;
}
Lee Crockford
Lee Crockford
9,196 Points

Wow. Awesome. Thanks James. Most of the websites I'v previously made have been cobbled together with the help different tutes and resources (hence why I've now come to Treehouse to really start from scratch and learn best practice). I didn't even realise any of the stuff you mentioned about no-js was even a thing. Haha. I'll take some time to process what you've said and try to implement it :) Again, cheers!