View Full Version : A solution to splash screen

10-09-2008, 04:18 PM
PLEASE anyone, I would like to get feedback on speeds and or problems that pop up on other peoples end, so if you could be a sport and go to www.devinrolsen.com (http://www.devinrolsen.com) to let me know if loading times and/or other problems occur I would be forever in debt.

BTW sites a WIP so no commenting on spelling est. Thanks everyone!!

If you like the solution the see below for run down on steps!!

10-09-2008, 06:58 PM
Well I decided to trash this window.onload idea.

Instead I got a bit more creative (note this whole buffer/fade in process is completely avoided if A)user has javascript turned off, B)user has cookies turned off)

My overall process now is:

Page loads and in my body I call a script to create a large div box covering entire page calling it screenMask.

"Body onload" executes the "fadeIn()" function.

"fadeIn()" function sets all elements opacity's to 0 then removes screenMask from document to exposes the body all alone, well it has a loading gif for its background.

After 4000miliseconds the "fadein()" function continues and morphs the opacity levels of all my elements from 0 to 100.

vola a buffer for content to load then a smooth fade in excellent, makes me want to cry, well that or goto bed finally

rnd me
10-09-2008, 10:51 PM
was a little choppy in ff3 and also took over 10s to load.
that's a bit much for most folks.
seemed to be waiting on lots of external scripts, images.
not sure which, but lots of status bar activity.

i would think just fading out the splash would be a lot less choppy.

but hey, thats just my two cents, and a 3 year old computer.

might goggle javascript performance.
lots of good advice floating around about reducing pageload.

10-10-2008, 02:10 AM
I am going crazy over here!!!

This makes absolutely NO sense what so EVER!!

ok check it out, rnd me thank you for taking the time to look at the site. I decided to just have the splash screen fadeout like you suggested and stop trying to fade in so many elements at once.

And my problem begins:

Splash screen comes up with loading.gif... YAY
Splash screen begins to fadeout after 4000miliseconds YAY
Splash screen now has 0 opacity BUT IS STILL THERE and blocking my entire page.

Here is my code:

function removeScreenMask()
var docBody = document.getElementsByTagName("body")[0];
var screenMask = document.getElementById("screenMask");

screenMaskFadeOut = new OpacityTween(document.getElementById('screenMask'),Tween.regularEaseIn, 100, 0, 1);

IE throws an error at me:

object expected

If I take the "removeChild" process out of its function and call it before the fade process the splash screen removes its self with no problem. However if after fading it, I try and remove it, all browsers are dumbfounded as to what object I am talking about.
BUT ITS CLEARLY STILL THERE, blocking my entire page.. WHY?

if you have previously viewed the site before this comment and would like to see the problem I am talking about you have to remove my cookie from the browser before visiting the site again other wise the fade effect is ignored.

my cookie name is devinrolsen.com


rnd me
10-10-2008, 05:46 PM
try this on for size:

function removeScreenMask(){
var screenMask = document.getElementById("screenMask");
screenMask.style.display = "none";

10-10-2008, 06:29 PM
Hey rnd me,
still no go, its so weird i dont understand how an element can be there but the browsers not recognize it to remove or turn its display off. I am going to try an contact the creator of the motion tween (http://jstween.blogspot.com/) lib I am using.

Ill keep this updated with my results.

rnd me
10-10-2008, 07:10 PM
if it's causing so many issues, why not use something else to fade out your splash?
you can still keep the lib going for other effects.

there are lots of small fade functions.
here is one i wrote to use minimal CPU:

function fade(elm, In, cb ){ // element, boolFadeIn, callback
var i=1, ii = 1, st=setTimeout, es=elm.style, del=fade.del || 40;
if(cb && cb.charAt){ cb = Function("element", "hidden", cb); }
es.display= elm.od || "block";
for ( i = 1; i < 11; i++){
st( function(){ trans(elm, ii++ * 10);}, i * del );
st( function(){ es.filter=null; if(cb){ cb.call(elm,elm,100);} }, 12 * del );
elm.od = es.display !== "none" ? es.display : "auto";
for ( i = 1; i < 11; i++){
st( function(){ trans(elm, (10 - ii++) * 10);}, 400 - i * del );
st( function(){ es.display="none"; trans(elm, 100); if(cb){ cb.call(elm,elm,0);} }, 12 * del );
}//end fade

function trans(elm, opacity) { elm.style.opacity = (opacity / 100);}
function transIE(elm, opacity) { elm.style.filter = "alpha(opacity=" + opacity + ")";}
if(window.ActiveXObject){ trans= transIE; }

usage examples:

fade(TXT) //fadeout
fade(TXT, true) //fadein
fade(TXT, 0, "alert(this)"); //show use of callback

i can't imagine this wouldn't fix the problem...

all you would need to code:

setTimeout(" fade(document.getElementById('screenMask')); ", 4000); // show body after 4 seconds

10-10-2008, 07:29 PM
opps sorry I seen that you added the tid bit on setTimeout above.

This script of yours is super fast m8. let me try out the timeout delay and see how it gos.

10-10-2008, 07:36 PM
Genius m8!! supper great work with this script.

I gotta ditch this motion tween (opacity) script, after implementing your version check out my loading time bam!

Thanks you for all your help rnd me, again!