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
Julian Pinzón Eslava
11,401 PointsIs there supposed to be a little lag while loading page? Spoiler is shown for a small window of time!
When I hit reload to see the page I can see a flash of the spoiler. Not enough to read it but enough for it to be annoying and making the page seem poorly coded. Is there anything I can do about that?
(I'm using a very powerful Retina Macbook Pro and the latest Chrome version)
Julian Pinzón Eslava
11,401 PointsI've written all my code following Andrew's code so I believe there aren't any differences. Can you spot any?
Here's my 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>
</html>
//1. Hide spoiler
$(".spoiler span").hide();
//2. Add a button
$(".spoiler").append("<button>Reveal Spoiler!</button>");
//3. When button is pressed
$("button").click(function(){
//3.1 Show the spoiler
$(".spoiler span").show();
//3.2 Get rid of button
$(this).remove();
});
5 Answers
jaredcowan
11,808 PointsYeah, I haven't done this course but the element isn't being hidden until the dom loads and the js file is run. You need to hide the element from the beginning. Check out this jsfiddle I made to show you. http://jsfiddle.net/v8j0es2t/1/
.spoiler > span {
display: none;
}
Vishal Iyer
4,551 PointsI see the lag too. Interestingly enough, it only seems to happen in Chrome. There is probably some browser incompatibility
Julian Pinzón Eslava
11,401 PointsThanks for your response Jared!
It's a partial workaround because it hides the text when the pages load so there's nothing to read. However the problem persists. The .spoiler class renders before the .js so the container still flashes... without text but if flashes.
jaredcowan
11,808 PointsSorry, now I'm a little confused. What still flashes? Can you show me in a fiddle or something.
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 PointsWhen the .spoiler span is set to display: none; it is the background: #1d3c6a; of the .spoiler that is still flashing. You don't see this if you comment it out. Getting it to come back, though, is a task for someone wiser than me.
Wendy Peralta
11,203 PointsI agree with Vishal Iyer . This was happening to me too so I tested it on Firefox and Safari and it doesn't happen on those browsers. Only Chrome.
Lee Zamastil
21,628 PointsI'll add that if I simply refresh the page in Chrome it will occasionally give a little "bounce" which is the same as the flash but looks a little different since the page is already drawn.
This seems to happen about half the time but doesn't follow a discernible pattern. Like others, I only see this in Chrome.
Edward Ulick
2,756 PointsI too am curious about this. Does anyone have any updates as to why this is happening?
jaredcowan
11,808 Pointsjaredcowan
11,808 PointsCan you please paste some of your code.
I assume that from the beginning you have the spoiler in a visible state, and not until the document has rendered do you have code that hides the spoiler. This could result in a flash.
It would be best to post some of your code though so we can better help you.