Wat het splash-effect inhoudt moge duidelijk zijn. Plaats direct na de body tag een div met het id "screen_splash" (<div id="screen_splash">), en sluit die div af nét voor de eind body tag (</div></body>). Plaats de twee javascriptjes op de plaats waar ze thuishoren, en alles behoort dan te werken. De pagina valideert op de CSS en de html5, en het script is foutloos volgens de strenge JSLint-norm.
<script>
/*global document: false */
var splash_screen_css = '#screen_splash{position:absolute;background:transparent;'+
'width:0%;height:0%;overflow:hidden;margin-top:-8px;padding:0 0.2% 0 0}',
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = splash_screen_css;
} else {
stijl_element.appendChild(document.createTextNode(splash_screen_css));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
</script>
<script>
/*global setInterval: false */
/*global clearInterval: false */
/*global screen: false */
/*global screen: false */
/*global window: false */
var i = 0,
x, stoppen, dehoogte = 0;
function fixdediv(x) {
x = document.getElementById(x);
x.style.width = i + "%";
x.style.height = dehoogte + "%";
if (i > 98) {
clearInterval(stoppen);
x.style.border = "0px";
x.style.height = 2*(screen.availHeight) + "px";
x.style.overflow = "scroll";
x.style.width = "98.3%";
return;
}
i = i + 1;
dehoogte = dehoogte + 1;
}
function beginnen() {
stoppen = setInterval(function () {
fixdediv('screen_splash');
}, 1);
}
window.onload = beginnen;
</script>