Erasmus Enigmus: Form-Submit nach Img-laden

Hallo Profis,

ich habe ein Problem:

Da das laden einer Seite mitunter etwas länger dauert, möchte ich vorher eine Seite anzeigen, in der ein animiertes Gif (Progressbar) angezeigt wird. Nach dem laden des Gifs soll ein Formular submitted werden, und daher eine andere Seite geladen.

Das Problem dabei ist, dass nach dem submit des Formulars, das gif die animation einstellt?!?!
Ich habe es sowohl im Body-tag als auch im img-tag mit onload="javascript:setTimeout('document.forms[0].submit()',1000);" probiert. Auch ohne setTimeout geht's nicht.

Hat jemand eine Idee?
Ich wäre sehr dankbar.

EE

  1. Versuche es mal mit dieses:

    <html>
    <head>
    <title>Image preloader</title>
    <table width="100%" height="100%"><tr><td align="center" valign="middle">
    <script language="javascript">

    /*                                                    ,  ,       *\                                                      / / \                                                     (/ //_ \_
          .-._                                           ||  .  \        \  '-._                                 _,:__.-"/---\_ \   ______/___  '.    .-------------------------'~-'--.)__( , )\ \  '--.\_\_\_  \_\  /    |                              ,'    \)|\ |
          /_.-' _\ \ _:,_           Image Preloader          " ||   (
        .'__ _.' '-/,-~            Version 2.0              |/
            '. ___.> /=,|         Written by Kal Torak         |
             / .-'/_ )  |                                      |
             )'  ( /(/  '--------------------------------------'
                  \ "
    \*             '=='                                              */

    //This code can be used to postpone displaying the page until all (necessary) images
    //have been loaded. There is an indicator showing how far the loading has
    //proceeded. The script works for IE4+,NN4+ and Opera 5+.
    //The script can freely be used on any non-commercial sites as long as the
    //disclaimer as shown above remains unchanged at the top of the code.

    var $text='Preloading images...<BR><BR>'; //the text appearing above the indicator
    var $dir='images/'; //the directory of the images, like 'images/'
    var $files=new Array('img1.jpg','img2.jpg','img3.jpg'); //a list of the images
    var $url='next.html'; //url for the next page
    var $w=300; //width of the indicator in pixels
    var $h=30; //height of the indicator in pixels
    var $fg_color="#dd0000"; //color of the indicator
    var $bg_color="#dddddd"; //backgroundcolor of the indicator
    var $borderwidth=1; //borderwidth in pixels
    var $bordercolor='#000000';
    var $autocontinue=30; //time in seconds before auto continue, 0 for no continue

    document.write($text);

    if(document.layers){
      document.write('<table><tr><td><ilayer bgcolor="'+$bordercolor+'" name="d1" width="'+($w+2*$borderwidth)+'" height="'+($h+2*$borderwidth)+'">');
      document.write('<layer bgcolor="'+$bg_color+'" name="d2" top="'+$borderwidth+'" left="'+$borderwidth+'" width="'+($w)+'" height="'+($h)+'"></layer>');
      document.write('<layer bgcolor="'+$fg_color+'" name="d3" top="'+$borderwidth+'" left="'+$borderwidth+'" width="0" height="'+($h)+'"></layer></ilayer></td></tr></table>');
    }else{
      document.write('<div id="d1" style="background:'+$bordercolor+';width:'+($w+2*$borderwidth)+';height:'+($h+2*$borderwidth)+';position:relative;">');
      document.write('<div id="d2" style="background:'+$bg_color+';width:'+($w)+';height:'+($h)+';position:absolute;top:'+$borderwidth+';left:'+$borderwidth+';">');
      document.write('<div id="d3" style="background:'+$fg_color+';width:0;height:'+($h)+';position:absolute;top:0;left:0;"></div></div></div>');
    }

    $img=new Array();$done=new Array();$loaded=0;

    for($i=0;$i<$files.length;$i++){
      $img[$i]=new Image();
      $img[$i].src=$dir+$files[$i]
      $done[$i]=0;
    }

    function $loadpage(){
      if($autocontinue)
        clearTimeout($u);
      clearInterval($t);
      document.location=$url;
    }

    function $check(){
      $g=0;
      for($i=0;$i<$img.length;$i++){
        if($img[$i].complete&&$done[$i]==0){
          $done[$i]=1;
          $loaded++;
          $g=1;
        }
      }

    if($g){
        if(document.layers){
          document.layers['d1'].document.layers['d3'].clip.width=Math.round($loaded*$w/$img.length);
        }else{
          document.all['d3'].style.width=Math.round($loaded*$w/$img.length);
        }

    if($loaded==$img.length){
        $loadpage();
      }

    }
    }

    if($autocontinue)
      $u=window.setTimeout("$loadpage()",$autocontinue*1000)

    $t=window.setInterval("$check()",500);

    </script>
    </td></tr></table>
    </body></html>