Spoiler appear while page is loading

Question

I'm not sure if I did something wrong, but when I load the page, for a fraction of a second the spoilers appear and then they are covered by the buttons, they are not readable, but it doesn't look good either.

Is there a solution for this?

My code

//Prevent spoilers from showing inmediately
//Show spoilers upon user request

//1.Hide spoiler
$(".spoiler span").hide();

//2. Add a button
$(".spoiler").append("<button>Reveal Spoiler!</button>");

//3. When button is pressed
$(".spoiler button").click(function () {
  //show the spoiler
    $(this).prev().show();

  //get rid of the button
    $(this).remove();
});

Thanks in advance!

Answer 1 · 2015-01-28T00:21:09Z

January 28, 2015 12:21am

Hey,

I also did this stage yesterday. I'm new to JavaScript and jQuery, but I'm sure it's because JS loads after HTML and CSS (since we included our JS file at the end of the page). That means you could hide the spoiler with CSS instead of JS, with a display: none; property. It does the same, but earlier, because CSS loads before JS.

So you don't need this anymore in JS:

$(".spoiler span").hide();

Instead you want this in CSS:

.spoiler span {
  display: none;
}

Voilá!

Answer 2 · 2016-01-12T12:09:59Z

January 12, 2016 12:09pm

Another pure jQuery solution, is to place all the jQuery within a .ready() function. You can then move the script tags to just before the closing </head> tag. This will load the javascript first, and then when the spoiler loads, it will apply only at that point. I am not sure if this is the best solution, for loading time, but it works for the exercise.

This will add it to a function.

$(".spoiler span").ready(function() {
    //1, hide spoiler
    $(".spoiler span").hide();
    //2, add a button
    $(".spoiler").append("<button>Reveal Spoiler!</button>")
    //3, when button pressed
    $(".spoiler button").click(function() {
        //3.1, show spoiler
        $(this).prev().show();
        //$(".spoiler span").show();
        //3.2, Get rid of button
        $(this).remove();
    });
})

This will put the script before the closing </head> tag.

<!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">
    <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>
</head>
<body>
    <img src="img/deathstar.png" />
    <p class="spoiler">
        <!--Spoiler:-->
        <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    </p>
    <p class="spoiler">
        <!--Spoiler:-->
        <span>Luke and Leia are siblings. Ew.</span>
    </p>
</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Diego Villaseñor

Diego Villaseñor

Spoiler appear while page is loading

2 Answers

Máté Végh

Máté Végh

Jon Brantingham

Jon Brantingham