• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

bilder vorladen mit ladebalken

Status
Für weitere Antworten geschlossen.
mustang

mustang

Mitglied
hallo leute,

ich will ein paar bilder auf meiner website vorladen. (wird später mal eine zoomansicht einer riesigen ahnentafel). auf jeden fall will ich dazu noch einen ladebalken.
problem ist, dass das derzeit nicht ganz funktioniert^^ also die bilder werden in den cache geladen, aber es wird kein ladebalken angezeigt...

mein script sieht derzeit so aus:

Code: 
<script type="text/javascript">
var myImageNames = new Array("###bilder###");
var myImagesLoaded = 0;

function preload()
{
   var t = new Array();

   for( var i = 0; i < myImageNames.length; i++ ) {
      t[i] = new Image();
      t[i].src = myImageNames[i];
      t[i].onload = progress;
   }
}

function progress()
{
   document.getElementById( "progressbar" ).style.width =
      ( 100 * ++myImagesLoaded / myImageNames.length );


</script>
sind natl mehrere bilder im array drin.
und html dazu:

HTML: 
<body onload="preload()">

<div id="progressbar" style="background: red; width: 0; heigth: 20px;" />

</body>
außerdem wäre es gut, wenn das onload nicht schon beim body drin wäre, sondern wenn ich das irgendwo in den code schreiben könnte... aber onload für divs geht ja nicht...
 
ich habe jetzt ein anderes script gefunden...
es ist von http://www.malleus.de/FAQ/preloadImages.html

ich habe es in meiner seite eingefügt. das komische ist, dass der ladebalken nur zu sehen ist, wenn ich <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> aus der php datei lösche...

kann mir das jemand erklären?
ihr könnt euch das mal hier anschauen:
http://robertkalb.bplaced.net/genealogie/ahnentafel_preload2.php
(css is noch im code und so. wird alles noch geändert.) ich will es nur erstmal zum laufen bekommen
 
Zuletzt bearbeitet:
Dein Skript ist an sich ok, nur du solltest auch einen onerror Event einbauen und die Events vor der Zuweisung von src schreiben. Aufrufen solltest du die Funktion nicht im onload (also nach dem laden) des Body, sondern einfach im Skript Block.

Ausserdem hattest du einen Fehler drin, der auch angezeigt wird, du solltest dich informieren wo die Browser Javascript Fehler anzeigen.

Das Problem mit dem Cache (vor allem lokal) hat soweit ich aus Tests weiß, nur der IE,. Du kannst aber auch dastesten, indem du noch auf complete prüfst.

Code: 
<script type="text/javascript">
var myImageNames = []; // die literale Schreibweise ist einfacher
var myImagesLoaded = 0;

function preload()
{
   var t = [];

   for( var i = 0; i < myImageNames.length; i++ ) {
      t[i] = new Image();
      t[i].onload = progress;
      t[i].onerror = progress;
      t[i].src = myImageNames[i];
      if(t[i].complete) progress();
   }
}

function progress()
{
   document.getElementById( "progressbar" ).style.width =
      ( 100 * ++myImagesLoaded / myImageNames.length );

} // <= Die Klammer hat gefehlt

preload();
</script>

An sich sind aber preload Skripte mit JS selten zu empfehlen. Einmal funktionieren sie nur mit JS und dann weißt du nicht wie beim user der Cache eingestellt ist, so dass er u.U. gezwungen wird die Bilder doppelt zu laden.
 
ja ich hab mir gedacht, dass ich davor wirklcih hinschreibe, dass js gebraucht wird, etc. ist ja auch eine zusätliche sache und wer ab der stelle kein js aktivieren will... der hat halt pech gehabt^^ geht einfach ni anders..

ich hab das ganze auch heut nacht mal mit php probiert. also sprich einfach nur die bilder im array anzeigen. dann sind die auch in den cache geladen. problem dabei ist nur, dass php nicht wartet, bis ein bild geladen ist... das heißt das script ist fertig und bei 100% gewesen und die bilder noch nicht alle da^^

was gibts denn noch für möglichkeiten die bilder vorzuladen?
weil ich hab eigtl nur javascriptlösungen gefunden, die auch gut funktionieren...
 
z.b. so:
HTML: 
<script type="text/javascript">
window.onload = function() {
    alert('fertig');
}
</script>

</pre>

<div style="display:none">
<img src="../bilder/foto1.jpg">
<img src="../bilder/foto2.jpg">
<img src="../bilder/foto3.jpg">
<img src="../bilder/foto4.jpg">
</div>
 
naja ich suche eigtl nach ner lösung, wo ich auch einen ladebalken habe. weil sonst sieht der besucher auf meiner seite ja überhaupt nichts...
genauso habe ich das imprinzip mit php gemacht. einfach alles in ein array und dann schleife durchlaufen lassen. und halt nebenbei immer einen ladebalken erhöht. aber php wartet halt nicht....

oder es gibt eine möglichkeit vorher noch eine meldung rauszuhaun, dass der besucher warten soll. und nach dem laden eine meldung, dass er fertig ist. allerdings vielleicht nicht in form eines alerts...

da fällt mir grad noch ein... ich könnte ja zwei divs nehmen, die übereinander liegen. das eine erstmal ausblenden. auf dem, was man sieht steht: bitte warten oder so. und dann mit window.onload einfach das erste div ausblenden und das zweite einblenden, wo dann meinetwegen draufsteht, dass es fertig geladen ist...
wäre doch was, oder? xD
 
joah stimmt schon^^ ich werd aber trotzdem noch einen drauf machen. aber einfach nur ein animated gif, was dann stehen bleibt, wenn die seite geladen ist. damit man trotzdem als benutzer noch eine optische kontrolle hat ;-) da hab ich dann zwar keine %-anzeige, aber egal.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben