Sarah: Bildergallerie preload?

SELF-Forum

Bildergallerie preload?

Sarah
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildergallerie preload?

    sarah
    – Informationen zu den Bewertungsregeln

    Kann denn niemand Helfen?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Bildergallerie preload?

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildergallerie preload?

      sarah
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Bildergallerie preload?

    plan_B
    – Informationen zu den Bewertungsregeln

    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

    --
         *®*´¯`·.¸¸.·
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildergallerie preload?

      EKKi
      – Informationen zu den Bewertungsregeln

      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:|
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. image gallery preload?

        plan_B
        – Informationen zu den Bewertungsregeln

        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

        --
             *®*´¯`·.¸¸.·
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. image gallery preload?

          Kai345 Homepage des Autors
          – Informationen zu den Bewertungsregeln

          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:|
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. image gallery preload?

            Don P
            – Informationen zu den Bewertungsregeln

            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

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln