Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    A solution to splash screen

    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 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!!

  • #2
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    ubh (10-10-2008)

  • #4
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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:
    Code:
    function removeScreenMask()
    {
    var docBody = document.getElementsByTagName("body")[0];
    var screenMask = document.getElementById("screenMask");
    docBody.removeChild(screenMask);
    }
    
    screenMaskFadeOut = new OpacityTween(document.getElementById('screenMask'),Tween.regularEaseIn, 100, 0, 1);
    setTimeout('screenMaskFadeOut.start()',4000);
    setTimeout('removeScreenMask()',4300);
    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

    PLEASE ANYONE??

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    try this on for size:

    Code:
    function removeScreenMask(){
      var screenMask = document.getElementById("screenMask");
      screenMask.style.display = "none";
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    ubh (10-10-2008)

  • #6
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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 lib I am using.

    Ill keep this updated with my results.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    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:

    Code:
    
    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); }
    	if(In){
    		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 );
    	}else{
    		 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:
    Code:
    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
    Last edited by rnd me; 10-10-2008 at 06:16 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    ubh (10-10-2008)

  • #8
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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.

  • #9
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •