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! While you're at it, check out some resources Treehouse students have shared here.
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 Saunders
10,171 PointsDelay 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
6,332 PointsI 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
5,377 PointsI'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
7,428 PointsCorrect 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
10,171 PointsThanks 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
7,428 PointsI 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
10,801 PointsTry in different browser, or on another computer (just do testing). If developer console dont gives you any error, the code is most likely good.