Better way to prevent FOUC in Harlowe

l3m35

https://en.wikipedia.org/wiki/Flash_of_unstyled_content

It's happening only on my title screen, when the styles are loaded. Of course it's very annoying, and there are plenty of ways to prevent it with Javascript (not tested yet). But is there a proven way to load content after the CSS, a "proper" way to do it? Thank you.

l3m35

If anyone needs, there's a solution in jQuery, hiding the page and then showing it after X seconds. 1000ms was enough for me.

$(function() {
    $('html').hide();
    $(document).ready(function(){
        $('html').delay(1000).show(0)
    });
});

TheMadExile

Your code is somewhat redundant. You use jQuery's ready functionality to invoke your two callbacks, the second one from within the first. This is particularly egregious, as user code doesn't even begin to execute until Harlowe's own ready callback has been executed.

The following, equivalent, code would probably be better:

(function () {
	var $html = $(document.documentElement);
	$html.hide();
	setTimeout(function () {
		$html.show();
	}, 1000);
})();

l3m35

That's weird, it's working for me. The first function hides all the content promptly at the beggining of loading (I guess), and when the document is ready (since .ready is when DOM is fully loaded https://api.jquery.com/ready), the timeout starts.

Or maybe my logic is affect by insomnia...

TheMadExile

I did not say it wouldn't work, I said that it was redundant. This is predicated on the assumption that you're placing your code within the Story JavaScript.

Continuing under that assumption. You code is not executed by Harlowe until after its main entry function, which it passes to jQuery as a ready callback, is called. Meaning that your two ready callbacks are redundant—yes, two, see below*. By the time your code is executed by Harlowe and adds your ready callbacks the state required for them to be called already exists, so they're called as soon as you add them. There is no point in using ready callbacks within Story JavaScript code.

The code I gave an example of before was a counter example, not using redundant callbacks. The outer function, which is immediately called, is simply there to keep the global scope clean, it's not strictly necessary and the code would work without it. For example:

// Cache the jQuery-wrapped document element (i.e. 'html').
var $html = $(document.documentElement);

// Hide the document element.
$html.hide();

// Set a 1s timer which executes the given anonymous callback.
setTimeout(function () {

	// Show the document element.
	$html.show();

}, 1000);

For that matter, using your original code without the pointless ready callbacks would also work. For example:

// Wrap the document element (i.e. 'html') within jQuery.
$(document.documentElement)

	// Hide the document element.
	.hide()

	// Set a 1s delay for following effects.
	.delay(1000)

	// Show the document element via a 0s animation.
	.show(0);

That's actually fairly similar to mine, save that it uses an effects queue delay and an animated show, whereas mine uses a standard timeout and a non-animated show.

* jQuery's ready callbacks have several syntaxes, two of which are:

// The original syntax.
$(document).ready(function () { /* a ready callback */ });

// The newer, and preferred, syntax.
$(function () { /* a ready callback */ });

Both of the functions you supply in your original example are used as ready callbacks.