Robin: img preload für onclick und wartemeldung

Hi ihr alle,

ich möchte für ein onclick-Event die "darunterliegenden" Bilder im voraus laden lassen,
und während dieser Ladevorgang läuft, soll der User aufgefordert werden kurz zu warten.
Wenn die "darunterliegenden" Bilder im voraus fertig geladen wurden, soll die Wartemeldung verschwinden und die Klickerei kann beginnen.

Im ForumsArchiv habe ich mich schon umgesehen und habe danach folgendes Scripting fabriziert:

========================================================

<script language="javascript" type="text/javascript">
<!--

function preLoad()
{
  prIm('../images/bilder/cinemaxx/1.jpg');
  prIm('../images/bilder/cinemaxx/2.jpg');
  prIm('../images/bilder/cinemaxx/3.jpg');
  prIm('../images/bilder/cinemaxx/4.jpg');
  prIm('../images/bilder/cinemaxx/5.jpg');
  prIm('../images/bilder/cinemaxx/6.jpg');
  prIm('../images/bilder/cinemaxx/7.jpg');
  prIm('../images/bilder/cinemaxx/8.jpg');
}
//-->

</script>
  <script name="change_imgs" language="JavaScript1.2"><!--
if (navigator.userAgent.indexOf("Mozilla/4.0") != -1) version = 4;
    else if (navigator.userAgent.indexOf("Mozilla/4.5") != -1) version = 4;
else if (navigator.userAgent.indexOf("Mozilla/3.0") != -1) version = 3;
else if (navigator.userAgent.indexOf("Mozilla/2.0") != -1) version = 2;
else if (navigator.userAgent.indexOf("MSIE") != -1) version = 1;
else version = 0;

if (version == 3 version == 4)

{  
firstbut1=new Image();  
firstbut1.src="../images/bilder/cinemaxx/1.jpg";  
  
secondbut1=new Image();  
secondbut1.src="../images/bilder/cinemaxx/2.jpg";  

thirdbut1=new Image();  
thirdbut1.src="../images/bilder/cinemaxx/3.jpg";  

fourbut1=new Image();  
fourbut1.src="../images/bilder/cinemaxx/4.jpg";  

fivebut1=new Image();  
fivebut1.src="../images/bilder/cinemaxx/5.jpg";  

sixbut1=new Image();  
sixbut1.src="../images/bilder/cinemaxx/6.jpg";  

sevenbut1=new Image();  
sevenbut1.src="../images/bilder/cinemaxx/7.jpg";  

eightbut1=new Image();  
eightbut1.src="../images/bilder/cinemaxx/8.jpg";  
}  
  
function change(Name,Image,No)  
{  

check=0
  
if (version == 3 version == 4)
{
{
document[Name].src=eval(Image+No+".src")
}
}
}
// -->
  </script>

========================================================

<body onload="preload();document.write('Bitte warte noch kurz, bis das Rätselbild 1 geladen wurde!')">

========================================================

Wie soll ich mein Script umschreiben, damit es endlich läuft - wäre echt toll, wenn mir jemand weiterhelfen könnte!!!!!

Danke und viele Grüße,

Robin

P.S. Anschauen kann man sich das Ganze unter
www.kresslesmuehle.de/jstest bzw.
www.kresslesmuehle.de/jstest/html/frameset.html

  1. Hallo!

    Ich habe eine ganz andere Lösung... Zwar nicht so konfortabel, dafür aber einfacher:

    <script language="JavaScript">

    fertig()
    {
      if(document.layers)
      {
        document.loaddiv.visibility = "hide";
        document.normaldiv.visibility = "show";
      }
      else if(document.all)
      {
        document.all.loaddiv.style.setAttribut("visibility","hidden","flase");
        document.all.normaldiv.style.removeAttribute("visibility","false");
      }

    }

    </script>

    <body onLoad="fertig()">

    <div name="loaddiv"><h1>Einen Moment, bitte, die Graphikcen werden geladen.</h1></div>

    <layer name="loadlayer"><h1>Einen Moment, bitte, die Graphiken werden geladen.</h1></layer>

    <div style="display:none">
    <!-- Hier alle img-Tags -->
    </div>

    <div style="visibility:hidden;" name="normaldiv">
    <!-- Hier die übereinader liegenden Bilder -->
    </div>

    <layer visibility="hide" name="normallayer">
    <!-- Hier die übereinader liegenden Bilder -->
    </layer>

    <body>

    Thilo

    1. DANKE THILO

      aber ich bin überarbeiteterweise nicht ganz sicher, wie ich Deinen Body umsetzen soll - mit den ganzen <div>-Tags hab ich normalerweise nichts großartig zu tun.

      Ich weiß, das ist jetzt dann ein bißchen frech, aber ich poste jetzt einfach mal meinen Body in der Hoffnung, daß Du mir die sache *somit fast schon fertig machst* AU WEIA
      welche tags wo und so

      Auf jeden Fall vielen Dank, Du warst mir bisher schon eine große Hilfe.

      Gruß, Robin

      ========================================================

      <body bgcolor="white" background="../images/kidsgross2.jpg" text="#0000b4" link="#0000b4" alink="#0000b4" vlink="#0000b4" onload="fertig()">
        <center>
         <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><b><table border="0" cellpadding="0" cellspacing="0" width="240" height="238">
          <tr>
           <td><a href="leer.html" target="Leer" ;return true; onclick="change('firstbut','firstbut',1)"><img height="80" width="120" src="../images/bildertuerlinks.gif" border="0" name="firstbut"></a></td>
           <td><a href="leer.html" target="Leer" ;return true; onclick="change('secondbut','secondbut',1)"><img height="80" width="120" src="../images/bildertuerrechts.gif" border="0" name="secondbut"></a></td>
          </tr>
          <tr>
           <td><a href="leer.html" target="Leer" ;return true; onclick="change('thirdbut','thirdbut',1)"><img height="80" width="120" src="../images/bildertuerlinks.gif" border="0" name="thirdbut"></a></td>
           <td><a href="leer.html" target="Leer" ;return true; onclick="change('fourbut','fourbut',1)"><img height="80" width="120" src="../images/bildertuerrechts.gif" border="0" name="fourbut"></a></td>
          </tr>
          <tr>
           <td><a href="leer.html" target="Leer" ;return true; onclick="change('fivebut','fivebut',1)"><img height="80" width="120" src="../images/bildertuerlinks.gif" border="0" name="fivebut"></a></td>
           <td><a href="leer.html" target="Leer" ;return true; onclick="change('sixbut','sixbut',1)"><img height="80" width="120" src="../images/bildertuerrechts.gif" border="0" name="sixbut"></a></td>
          </tr>
          <tr>
           <td><a href="leer.html" target="Leer" ;return true; onclick="change('sevenbut','sevenbut',1)"><img height="80" width="120" src="../images/bildertuerlinks.gif" border="0" name="sevenbut"></a></td>
           <td><a href="leer.html" target="Leer" ;return true; onclick="change('eightbut','eightbut',1)"><img height="80" width="120" src="../images/bildertuerrechts.gif" border="0" name="eightbut"></a></td>
          </tr>
         </table></b></font></center>
      </body>

      ========================================================

      Hallo!

      Ich habe eine ganz andere Lösung... Zwar nicht so konfortabel, dafür aber einfacher:

      <script language="JavaScript">

      fertig()
      {
        if(document.layers)
        {
          document.loaddiv.visibility = "hide";
          document.normaldiv.visibility = "show";
        }
        else if(document.all)
        {
          document.all.loaddiv.style.setAttribut("visibility","hidden","flase");
          document.all.normaldiv.style.removeAttribute("visibility","false");
        }

      »»

      }

      </script>

      <body onLoad="fertig()">

      <div name="loaddiv"><h1>Einen Moment, bitte, die Graphikcen werden geladen.</h1></div>

      <layer name="loadlayer"><h1>Einen Moment, bitte, die Graphiken werden geladen.</h1></layer>

      <div style="display:none">
      <!-- Hier alle img-Tags -->
      </div>

      <div style="visibility:hidden;" name="normaldiv">
      <!-- Hier die übereinader liegenden Bilder -->
      </div>

      <layer visibility="hide" name="normallayer">
      <!-- Hier die übereinader liegenden Bilder -->
      </layer>

      <body>

      Thilo

      1. Hallo!

        Du kopiert den Quellcode, vom Posting auf das ich anwortet, und fügst es in den "normallayer! und "normaldiv" ein. dann fügst du noch die parameter align="center" hinzu; dann kanst du die <center>-Tags weglassen.
        Dann nimmst Du alle Grphiken, à la <img scr="bild.gif" hight="23" width="25" alt="bild">, und beschräkst Dich auf die Angaben src,  alt, hight und width. Diese fügst Du dann in "loaddiv" und "loadlayer" ein.
        Danach kopierst Du die Funktion "change" unter ide Funktion "fertig", und fertig.

        Thilo Modner

        1. Super Sache,

          jetzt müsste ich das gebacken kriegen - Yippieh!!!

          Danke Thilo, ohne Dich hätte mir die Stadt Augsburg u.U. morgen den Arsch aufgerissen, und das wo ich sowieso schon krank für den Haufen rumbastele.

          Vielleicht kann ich Dir ja auch mal nützlich sein,

          Grüße Robin

  2. Hallo Robin,
    preload != preLoad
    Dein Aufruf in Zeile 81 muss preLoad() heissen, Javascript unterscheidet Gross- und Kleinschreibung.
    Hoffe das hilft.

    Gruss

    Thomas