Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Benjamin Saunders10,171 Points
Delay in hiding spoiler
It seems that when I refresh the page, the spoiler briefly flashes up before the jQuery function hides it. My library and .js file are both included at the end of the html body tag.
Any ideas why there is a latency long enough for me to see it?
//1. Hide spoiler $(".spoiler span").hide(); //2. Add a button $(".spoiler").append("<button>Reveal Spoiler!</button>"); //3. When button pressed //3.1 Show spoiler //3.2 Get rid of button
Michael Choi6,332 Points
I am guessing this is jQuery performance issue, I got curious upon reading this question as well, haha. Googled around a bit and found this blog post.
.show() & .hide() These were, in fact, comparatively slow methods of hiding DOM elements across all browsers. One of the >main reasons is that .hide() has to save the notion of what the display attribute was before, so that .show() >can restore it. It does this using the .data() jQuery method, storing that information on the DOM element. In >order to do so, .hide() loops through every element twice: once to save the current display value, and then >once to update the display style to none. According to a comment in the source, this prevents the browser >from reflowing with every loop. The .hide() method also checks to see if you pass in a parameter to animate >the hiding with an effect. Even passing in a 0 dramatically slows down the performance. Performance was >slowest on the first call to .hide(); subsequent calls were faster.
Micheal Ammirati5,377 Points
I'm actually trying to use jquery in a similar way on my website and I have the same problem. The way I fixed the issue was to hide the element using css to "display:none;". This way the element is never shown on the page until you use jquery to show() it.
Jonathan Söder7,428 Points
Correct me if I'm wrong but isn't it just a matter of which loads first? Meaning that the text shows until jquery loads and then reads the js file? I'm not good at jquery and js but if you put the jquery stuff in the head the text won't show during refreshes. I can't recall if it's bad practice to put it in the head though. Something in the back of my mind tells me so... Maybe there's a workaround to that? I'd love to hear what other says.
Pavle Lucic10,801 Points
Try in different browser, or on another computer (just do testing). If developer console dont gives you any error, the code is most likely good.