script für preload & onmouseover /-out

[Damug]

ich habe hier ein kleines script was ich in den head bereich setzen will und mir ein paar bilder für den mouseover in den cache laden soll.

function preload()
{  var = new Array( )

wechsel1 = new Image()
   wechsel1.src = "../bilder/Album_07-2.png"
   wechsel2 = new Image()
   wechsel2.src = "../bilder/Album_08-2.png"
   wechsel3 = new Image()
   wechsel3.src = "../bilder/Arbeit2.png"
   wechsel4 = new Image()
   wechsel4.src = "../bilder/Blumen2.png"
   wechsel5 = new Image()
   wechsel5.src = "../bilder/Familie2.png"
   wechsel6 = new Image()
   wechsel6.src = "../bilder/Garten2.png"
   wechsel7 = new Image()
   wechsel7.src = "../bilder/Home2.png"
   wechsel8 = new Image()
   wechsel8.src = "../bilder/Katze2.png"
   wechsel9 = new Image()
   wechsel9.src = "../bilder/Kuehe2.png"
   wechsel10 = new Image()
   wechsel10.src = "../bilder/PC-Info2.png"
   wechsel11 = new Image()
   wechsel11.src = "../bilder/Ponnys2.png"
   wechsel12 = new Image()
   wechsel12.src = "../bilder/Tiere2.png"
   }

würde das so funktionieren?
der mouseover ist direkt im body berreich bei den bildern später geschrieben

onmouseover="if (document.images) document.name.src = wechsel1.src

kann das so sein?

[josh]

Hallo,

{  var = new Array( )

Das geht nicht. var leitet eine Variablendefinition ein und ist ein reserviertes Wort. Es müsste heißen: var variablenname = new Array(); Mal abgesehen davon, dass die Variable gar nicht benutzt wird...

Beim Rest von der Funktion fehlen die Semikola und wiederum das var.

Ich glaube so wäre das ganze einfacher:

  
var hoverimages = new Array(  // globaler Bereich!!  
  "../bilder/Album_07-2.png",  
  // andere Bilder...  
);  
function preload() {  
  for (var i = 0; i < hoverimages.length; i++) {  
    var preloader = new Image();  
    preloader.src = hoverimages[i];  
  }  
}  

Weiß jemand, ob Preloading so überhaupt funktioniert (mit einem Image-Objekt und src)?

der mouseover ist direkt im body berreich bei den bildern später geschrieben

onmouseover="if (document.images) document.name.src = wechsel1.src

kann das so sein?

??? Verstehe ich das jetzt richtig, es gibt Bilder in der Seite, und wenn man mit der Maus drüberfährt, soll das Bild gewechselt werden?

  
function hover_image(e, n) {  
  e._oldsrc = e.src;  
  e.src = hoverimages[n];  
}  
function unhover_image(e) {  
  e.src = e._oldsrc;  
}  

Und dann bei jedem Bild die Eventhandler setzen:
onmouseover="hover_image(this, 123)"
onmouseout="unhover_image(this)"

Bei onmouseover ist 123 der Index aus dem hoverimages Array für das Bild.

Gruß

[noscript]

Weiß jemand, ob Preloading so überhaupt funktioniert (mit einem Image-Objekt und src)?

nur das letzte Bild würde geladen werden. Die anderen werden bei Beendigung der Schleife ja nicht mehr angefordert.

[josh]

Hallo,

nur das letzte Bild würde geladen werden. Die anderen werden bei Beendigung der Schleife ja nicht mehr angefordert.

Ich habe gerade noch einmal nachgeschaut. Die Lösungen, die man bei Google auf die Schnelle findet, machen es auch so oder so ähnlich: http://www.yourhtmlsource.com/images/preloading.html, http://www.zdnet.de/builder/program/0,39023551,39123122,00.htm

Es geht nicht darum, diese Image-Objekte aufzubewahren oder zu benutzen, sondern das Bild in den Browsercache zu bugsieren, damit sie schnell verfügbar sind.

Gruß

[noscript]

Ich habe gerade noch einmal nachgeschaut. Die Lösungen, die man bei Google auf die Schnelle findet, machen es auch so oder so ähnlich: http://www.yourhtmlsource.com/images/preloading.html, http://www.zdnet.de/builder/program/0,39023551,39123122,00.htm

Betonung liegt hier aber auf "so ähnlich". Diese Varianten verwenden durchaus für jedes Bild eine eigene Variable.

Es geht nicht darum, diese Image-Objekte aufzubewahren oder zu benutzen, sondern das Bild in den Browsercache zu bugsieren, damit sie schnell verfügbar sind.

Und genau das passiert nicht, denn der Browser lädt am Ende der for-Schleife exakt ein Bild. Selbst wenn zwischendurch die anderen mal kurz angefordert wurden wird das ja spätestens im nächsten Zyklus der Schleife abgebrochen. Wenn ich recht informiert bin, wartet aber der Browser mit dem Anfordern sowieso bis zum Ende der Schleifeneinheit.

[Damug]

@josh

Beim Rest von der Funktion fehlen die Semikola und wiederum das var.

hups, die Semikola sollten da schon sein und der Verweis auf JS, sollte der nicht viel mehr so aussachaun:
<script type="text/javascript" src="../html3/head.js"></script>

Weiß jemand, ob Preloading so überhaupt funktioniert (mit einem Image-Objekt und src)?

so wie ich den anderen beiden postings nach dir entnehme wird dein script nur ein bild vorladen?

??? Verstehe ich das jetzt richtig, es gibt Bilder in der Seite, und wenn man mit der Maus drüberfährt, soll das Bild gewechselt werden?

ja das war gemeint :)

Ich habe gerade noch einmal nachgeschaut. Die Lösungen, die man bei Google auf die Schnelle findet, machen es auch so oder so ähnlich: http://www.yourhtmlsource.com/images/preloading.html, http://www.zdnet.de/builder/program/0,39023551,39123122,00.htm

Betonung liegt hier aber auf "so ähnlich". Diese Varianten verwenden durchaus für jedes Bild eine eigene Variable.

Bezogen auf den 1. Lnk bin ich aber auch der Meinung. Ausser dass dort kein, wie bei mir, wohl sinnloses Array gesetzt wurde und das ganze in keiner fuktion () steht ist es doch ziemlich ähnlich °° ?

Es geht nicht darum, diese Image-Objekte aufzubewahren oder zu benutzen, sondern das Bild in den Browsercache zu bugsieren, damit sie schnell verfügbar sind.

jap, vorerst würde mir das reichen :)
und bitte nehmt noch mal stellung zu meinem "Script" aus dem 1. post. würde gern noch n paar mehr meiung azu hören.

Danke für eure Hilfe und die Links.

[josh]

Hallo,

Aaaalso... Ich hätte vielleicht eher hier hin verlinken sollen. Hier wird auch mit Array und einem (!) Image-Objekt gearbeitet. Das wird zwar außerhalb der Schleife erstellt und dann einfach jedesmal mit einer neuen src gefüttert , aber das macht offensichtlich keinen Unterschied.

Ich habe gerade mal meinen Code aus meinem Posting ausprobiert. Die Verzögerung wurde per PHP erzeugt (2 Sekunden), weil das ganze auf einem lokalen Server sonst nicht sichtbar wäre. Dummerweise habe ich die nächstbesten Bilder genommen, welche etwas arg groß waren ;-). Naja, auf jeden Fall funktioniert der Code so.

Offensichtlich reagiert das Image-Objekt darauf, dass seine src Eigenschaft geändert wird. Daraufhin lädt es automatisch das Bild. Und alles was geladen wird, landet im Cache. Lustig ist nur, dass mein Firefox 2, wenn ich das Preloading unterbinde, die Hover-Bilder erst mal nicht cacht, sondern erst, wenn man die Seite neulädt...

Gruß

[Damug]

Aaaalso... Ich hätte vielleicht eher hier hin verlinken sollen.

jo :D darfst mir mal verraten bitte mit welchen suchbegriffen du google fütterst?
Das zu lernen scheint mir sinnvoller und hilfreicher als JS weiter zu büffeln ;)

[josh]

Hallo,

jo :D darfst mir mal verraten bitte mit welchen suchbegriffen du google fütterst?
Das zu lernen scheint mir sinnvoller und hilfreicher als JS weiter zu büffeln ;)

Das mit den Suchbegriffen frage ich mich gerade auch. Dummerweise habe ich, um mein Script zu testen, den Cache und leider auch die History gelöscht und weiss es jetzt nicht mehr...

*Schwitz* mit "javascript image" findet man schon mal den Beitrag von zdnet. Aber irgendwie ist das Ganze Glückssache. Einfach ein bisschen die Begriffe rumschubsen hilft oft und ist besser als 7 Millionen Seiten anzusehen ;-)

Gruß

[Damug]

ok, nochmals danke für die links.
habe selbst in google lange viel rein geschmissen bis ich hier gepostet habe, bin aber weder auf den 1sten link noch auf den von zdnet gestossen.

der zdnet code war für mich verstänlich und hat mir geholfen meinen bisherigen preload in zusammenhang mit onmouseover, dem ich noch ein onmouseout hinzugefügt habe, zu bringen.

das folgende script funktioniert und gefällt mir ;) :

<script language = "JavaScript">
function preload()
{  wechsel1 = new Image();
   wechsel1.src = "../bilder/Album_07-2.png";
   wechsel2 = new Image();
   wechsel2.src = "../bilder/Album_08-2.png";
   wechsel3 = new Image();
   wechsel3.src = "../bilder/Arbeit2.png";
   wechsel4 = new Image();
   wechsel4.src = "../bilder/Blumen2.png";
   wechsel5 = new Image();
   wechsel5.src = "../bilder/Familie2.png";
   wechsel6 = new Image();
   wechsel6.src = "../bilder/Garten2.png";
   wechsel7 = new Image();
   wechsel7.src = "../bilder/Home2.png";
   wechsel8 = new Image();
   wechsel8.src = "../bilder/Katze2.png";
   wechsel9 = new Image();
   wechsel9.src = "../bilder/Kuehe2.png";
   wechsel10 = new Image()
   wechsel10.src = "../bilder/PC-Info2.png";
   wechsel11 = new Image();
   wechsel11.src = "../bilder/Ponnys2.png";
   wechsel12 = new Image();
   wechsel12.src = "../bilder/Tiere2.png";
   }
</script>
</head>
<body onLoad="javascript:preloader()">

<a href="album07.html" onMouseOver="javascript:document.img01.src='../bilder/Album_07-2.png'" onMouseOut="javascript:document.img01.src='../bilder/Album_07.png'">
<img name="img01" src="../bilder/Album_07.png"></a>

für alle die später noch vorbei kommen ;) Greez Daniel

[josh]

Hallo,

<body onLoad="javascript:preloader()">

Noch ein kleiner Hinweis: Das "javascript:" Dingens braucht man nur bei Verweisen, nicht bei Eventhandlern wie onload. onload="preloader()" reicht vollkommen.

Gruß

[Struppi]

<a href="album07.html" onMouseOver="javascript:document.img01.src='../bilder/Album_07-2.png'" onMouseOut="javascript:document.img01.src='../bilder/Album_07.png'">
<img name="img01" src="../bilder/Album_07.png"></a>

Sowas läßt sich viel einfacher mit CSS erledigen, z.b. mit dieser Technik

Struppi.