später über JS geladene Grafiken beim Seitenladen mitladen?

DarkEmperor

Hey,
ich habe mal eine Frage zum Thema: "Grafiken die später über JS angezeigt werden schon beim Seitenladen mit zu "chachen""?

Ich hab z.b. bei meinem Registrierungsformular für jedes Feld 2Grafiken die anzeigen ob die Eingabe Korrekt oder Falsch ist! Und mich nervt es immer das die Grafiken erst geladen werden wenn es die Funktion erfordert weil das ganze dadurch verzögert wird!
1. Idee die ich hatte mir aber echt nicht gefällt ist die Grafiken einfach im Quellcode zu laden aber mit opacity 100% oder so zu versehen, so das die irgendwo geladen werden aber nicht angezeigt werden! Ist aber weder schön noch praktisch noch sinnvoll, nochdazu weil es mir dann evtl. das Design zerschiest.

Deshalb die Frage ob es irgendeine bessere Variante gibt die Grafiken schon beim laden der Seite in chache zu bringen, mir egal ob das per php, js oder html ist, solange die Grafiken dann nicht mehr geladen werden müssen sobald sie gebraucht werden!
Bsp.: http://friendslounge.bplaced.net

Mit DSL geht das zwar ganz flott aber ich hatte vorher UMTS und da hats genervt! Und grade wenn man dann größere Grafiken laden will wäre das echt hilfreich!

Schonmal danke für eure Hilfe!

MfG

synaptic

also da gibts 3 wege da die ladezeit zu verkürzen

1) sprites, alle benötigten oft verwendeten grafiken in eine packen und nur noch für die anzeige die hintergrundposition ändern
2) javascript-preloader - über ein array image-objects erzeugen und da die bilder reinstopfen
3) css-preloader, alle bilder mit dem style: visiility:hidden laden und in ein div stopfen, das mit position:absolute und left: -100000px außerhalb jeglicher sichtbarkeit lagern

DarkEmperor

Ok, die 2. Variante scheint mir die tollste, nur kenne ich mich mit JS-Arrays noch nicht so aus!
So, eh ich hier wieder rumheule ob mir das einer schnell machen kann, hier das google Ergebnis:

Code

<script language="JavaScript">


function preloader() 
{


     // counter
     var i = 0;


     // create object
     imageObj = new Image();


     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"


     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }


} 


</script>

Alles anzeigen

Das wäre dann die Funktion oder? Und das dann im body-tag mit onload ausführen? Wenn ja ist es einfacher als ich dachte und ich bedanke mch für die schnelle Antwort!!!

MfG

PS: entschuldigt bitte meine schreibweise

Tags