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 jQuery Basics (2014) Creating a Spoiler Revealer Perform: Part 1

Benjamin Saunders
Benjamin Saunders
10,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?

//HTML FILE <!DOCTYPE html> <html> <head> <title>Star Wars Spoilers</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title"charset="utf-8"> </head> <body> <img src="img/deathstar.png" /> <p class="spoiler"> <!--Spoiler:--> <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span> </p> <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script> </body>

//.JS File

//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

4 Answers

Michael Choi
Michael Choi
6,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 Ammirati
Micheal Ammirati
5,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öder
Jonathan Söder
7,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.

Benjamin Saunders
Benjamin Saunders
10,171 Points

Thanks Jonathan, I can see what you mean. I too assume that this is the cause of the problem but this does not seem to be an issue for Andrew Chalkley (the jQuery basics teacher.) On his demo, the hide function seems to work instantly. Curious..

Jonathan Söder
Jonathan Söder
7,428 Points

I downloaded the finished class project to try it out and it's strange. When I tried the code out in the workspace and pressed preview it actually flashed the spoiler very briefly before adding the spoiler buttons. However when I spam F5 and just refresh the preview it doesn't show the spoiler at all! When I tried it out via desktop the spoilers are shown briefly in appr. 1/3 of the times I open up index.html and every time I refresh. It'd be awesome if someone could explain this, I'm really curious as to why this is happening!

Pavle Lucic
Pavle Lucic
10,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.