Sarah: Bildergallerie preload?

Hallo
Ich arbeite zurzeit mit einer ImgGallerie (Java vs. html), das sieht folgendermassen aus:

<script type="text/javascript">
  var myImages = new Array();
 myImages[1] = { 'src' : 'pics/Projekte/bootsbau.jpg',
                'dsc' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };
 myImages[2] = { 'src' : 'pics/Projekte/1_1_8.jpg',
                'dsc' : 'Fertiges Boot: Zur Sicherheit beim Kentern dienen Schwimmhilfen, die im Bug und Heck untergebracht sind.' };
myImages[3] = { 'src' : 'pics/Projekte/1_1_9.jpg',
                'dsc' : 'Die diagonal gespannten Sitzgurten lassen sich unterschiedlich montieren.' };
myImages[4] = { 'src' : 'pics/Projekte/1_1_10.jpg',
                'dsc' : 'Fertig zum Wassern.' };

var maxValue = myImages.length - 1;
  var intValue = 1;
  function gallerie(charValue) {
  if(charValue == 'c') {
    document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p>";
   }
   else if(charValue == '+') {
    if(intValue == maxValue) {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'><p>" + myImages[1].dsc + "</p>";
     intValue = 1;
    }
    else {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'><p>" + myImages[intValue + 1].dsc + "</p>";
     intValue = intValue + 1;
    }
   }
   else if(charValue == '-') {
    if(intValue == 1) {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[maxValue].src + "'><p>" + myImages[maxValue].dsc + "</p>";
     intValue = maxValue;
    }
    else {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'><p>" + myImages[intValue - 1].dsc + "</p>";
     intValue = intValue - 1;
    }
   }
  }

</script>

<div id="logo"></div>

<body onLoad="gallerie('c')">

<div id="imgGallerie"></div>
<div id="links"><a href="#" onClick="gallerie('-')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032"><</font></a></div>
<div id="rechts"><a href="#" onClick="gallerie('+')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032">></font></a></div>

</body>

Meine Frage nun, gibt es eine möglichkeit, dass die Bildergallerie sich vorläd? Was mich eben stört ist, dass die Bezeichnungen der Bilder, wenn man vorwärts klickt, zuerst oben erscheinen, solang, bis sich das Bild läd. Das ist zwar nur kurz, aber trotzdem leicht unprofessionell..

Kann mir da jemand helfen?
Da wäre ich doch sehr verbunden

mfg, Sarah

  1. Kann denn niemand Helfen?

  2. Ich arbeite zurzeit mit einer ImgGallerie (Java vs. html), das sieht folgendermassen aus:

    Erstmal hast du das falsche Thema gewählt, deine Frage ist eine Javascript Frage (mit Java hat dies nichts zu tun).

    <script type="text/javascript">
      var myImages = new Array();
    myImages[1] = { 'src' : 'pics/Projekte/bootsbau.jpg',
                    'dsc' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };

    Warum fängst du das array mit 1 an?
    Arrays beginnen i.d.R. mit dem Index 0
    Dann könntest du dir weiter unten auch eine Menge Code ersparen.

    myImages[2] = { 'src' : 'pics/Projekte/1_1_8.jpg',
                    'dsc' : 'Fertiges Boot: Zur Sicherheit beim Kentern dienen Schwimmhilfen, die im Bug und Heck untergebracht sind.' };
    myImages[3] = { 'src' : 'pics/Projekte/1_1_9.jpg',
                    'dsc' : 'Die diagonal gespannten Sitzgurten lassen sich unterschiedlich montieren.' };
    myImages[4] = { 'src' : 'pics/Projekte/1_1_10.jpg',
                    'dsc' : 'Fertig zum Wassern.' };

    Um die Bilder vorzuladen, kannst du hier einfach statt src ein Image-Objekt verwenden.

    <div id="imgGallerie"></div>
    <div id="links"><a href="#" onClick="gallerie('-')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032"><</font></a></div>

    Das Font-Tag ist in den meisten HTML Versionen nicht mehr erlaubt, du kannst dies Prima durch die Verwendung von CSS ersetzen.

    Struppi.

    1. Erstmal danke für die Antwort und das HInweisen auf mein fälschliche Verbindung.

      Deine Antwort hier:

      Um die Bilder vorzuladen, kannst du hier einfach statt src ein Image-Objekt verwenden.

      Kannst du das genauer erklären? ist vielleciht jetzt sehr frech zufragen, aber wie sähe dann mein array aus?

      Vielen Dank für deine Hilfe

      Sarah

  3. Hallo,

    ich fände es übersichtlicher, wenn du nach dem EVA-Prinzip hier auch im kleinen vorgehen würdest.

    • Eingabe: dein Steuerzeichen
    • Verarbeitung: neuen Index berechnen intValue=
    • Ausgabe: ...innerHTML=" .... [intValue] ... "
      
    var maxValue = myImages.length - 1;  
    var intValue = 1;  
      
    function gallerie(charValue) {  
      
     var ig=document.getElementById("imgGallerie");  
      
     if (charValue == 'c') intValue=1;  
      else if(charValue == '+') intValue++;  
      else if(charValue == '-') intValue--;  
      
     if (intValue < 1 ) intValue=1;   // dein Startindex  
     if (intValue > maxValue ) intValue=maxValue;  
      
     ig.innerHTML = "<img src='" + myImages[intValue].src + "'><p>" +    myImages[intValue].dsc + "</p>";  
     }  
    
    

    zum Thema Bilder vorladen: Im Prinzip einfach, wenn deine Gallerie klein ist. Andernfalls läd jeder Besucher deiner Seite alle Bilder, auch wenn er nach ein paar Clicks genug hat. u.U. viel Traffic für nichts ...

    Wenn deine Bildnavigation nur aus vor und zurück besteht, würde es doch wohl genügen, nur das nächst mögliche Bild vorzuladen.

      
    function vorladen1(i) {  
     if (! myImages[i].img ) {  
      myImages[i].img = new Image();  
      myImages[i].img.src = myImages[i].src;  
      }  
     }  
      
    function vorladen(i) {  
     var next= i<(maxValue-1) ? (i+1) : 1;  
     var prev= i>1 ? (i-1) : 1;  
     vorladen1(next);  
     vorladen1(prev);  
     }  
    
    

    mit der Initialisierung sollte das Startbild vorgeladen werden

    vorladen1(1);

    und innerhalb der Galleriefunktion wäre der Aufruf

    vorladen(intValue);

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    1. Mahlzeit,

      function gallerie(charValue) {

      var ig=document.getElementById("imgGallerie");

      zum Thema Bilder vorladen: Im Prinzip einfach, wenn deine Gallerie klein ist. Andernfalls läd jeder Besucher deiner Seite alle Bilder, auch wenn er nach ein paar Clicks genug hat. u.U. viel Traffic für nichts ...

      und innerhalb der Galleriefunktion wäre der Aufruf

      Bin ich eigentlich der einzige, der das Wort Gallerie NICHT kennt ...?

      MfG,
      EKKi

      --
      sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
      1. Hallo,

        Bin ich eigentlich der einzige, der das Wort Gallerie NICHT kennt ...?

        und ich dachte schon, EKKi sind bestimmt die störenden ";" aufgefallen ...

          
         if (charValue == 'c') intValue=1  
          else if(charValue == '+') intValue++  
          else if(charValue == '-') intValue--;  
        
        

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·
        1. Grütze .. äh ... Grüße!

          und ich dachte schon, EKKi sind bestimmt die störenden ";" aufgefallen ...

          if (charValue == 'c') intValue=1
            else if(charValue == '+') intValue++
            else if(charValue == '-') intValue--;

            
          Wenn ";" so stört, nimm halt ":"  
            
          `intValue = (charValue == 'c') ? 1 : (charValue == '+') ? ++intValue : (charValue == '-') ? --intValue : intValue;`{:.language-javascript}  
            
          scnr ;)  
            
          Cü  
          Kai
          
          -- 
          [Der vertuschte Gefahrstoff: Dihydrogenmonoxid](http://www.dhmo.de/fakten.html)  
            
          ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
          
          1. und ich dachte schon, EKKi sind bestimmt die störenden ";" aufgefallen ...

            Die störenden ";"?
            Mir fallen eher die fehlenden "{}" auf. So gehört sich das:

              
              if(charValue == 'c'){ intValue=1; }  
              else if(charValue == '+'){ intValue++; }  
              else if(charValue == '-'){ intValue--; }  
            
            

            Oder noch besser so:

              
            if (charValue == 'c'){  
              intValue=1;  
            }else if(charValue == '+'){  
              intValue++;  
            }else if(charValue == '-'){  
              intValue--;  
            }
            

            Unnötig? Pedantisch? Finde ich nicht. Wer schon  mal einen Fehler in umfangreichen Scripts gesucht hat, das Notationen wie

              
            if(charValue == 'c')  
              intValue=1  
              tmpValue=2  
            if(nothing)  
              newValue=0  
              oldValue=0  
            if(something) //...  
            
            

            enthält, der gewöhnt sich bald freiwillig an, lieber etwas zuviel hinzuschreiben, als zu wenig.

            Gruß, Don P