✔ Ladeanzeiger gif beim Preloaden anzeigen

Denniz

Denniz

Erfahrenes Mitglied
Hallo Leute,

ich habe ein Skript welches mir zB Bilder für eine Gallery vorläd.
HTML: 
<script  type="text/javascript">
<!--
function BilderVorladen()
{
    document.Vorladen = new Array();
 
    if(document.images)
    {
        for(var i = 0; i < BilderVorladen.arguments.length; i++)
        {
            document.Vorladen[i] = new Image();
            document.Vorladen[i].src = BilderVorladen.arguments[i];
        }
    }
}
window.onload = function init() {
           BilderVorladen('_images/bild1.jpg','_images/bild2.jpg','_images/bild3.jpg');
}
//-->
</script>

Jetzt hab ich eine site entdeckt auf der man sich Ladeanzeiger bauen kann.
Wie bekomme ich mein ladeanzeiger.gif beim preloaden angezeigt und sobald alle Bilder vorgeladen sind soll sich das gif dann schließen.
Weiß jemand wie man dies umsetzt?
Leider ist es nicht auf der site erklärt.

Beste Grüße
-Denniz
 
Eigentlich hast Dir die Frage schon fast selber beantwortet.

Ladebildchen wo einbinden.
Anfangen mit Bilder vorladen
Was ist wenn alle Bilder geladen sind ? Er ist fertig also können wir das Ladebildchen nun entfernen.

Also wenn er mit der For Schleife fertig ist , hat er ja alle Bilder drinnen da gehst da entfernst dann einfach das Ladebild.
 
FipsTheThief hat gesagt.:
Also wenn er mit der For Schleife fertig ist , hat er ja alle Bilder drinnen da gehst da entfernst dann einfach das Ladebild.
Zum Vergrößern anklicken....


Das dürfte nicht so einfach funktionieren, da, wenn die for Schleife durch ist, noch nicht alle Bilder geladen sind, sondern nur der Befehl zum laden aller Bilder gegeben ist.


Code: 
<script  type="text/javascript">
<!--

function BildGeladen() {
    document.Geladen++;
    if( document.Geladen == document.Vorladen.length ) {
        document.getElementById( "vorlade_gif" ).style.display = "none";
    }
}

function BilderVorladen()
{
    document.Vorladen = new Array();
     document.Geladen = 0;
     
     document.getElementById( "vorlade_gif" ).style.display = "block";
     
    if(document.images)
    {
        for(var i = 0; i < BilderVorladen.arguments.length; i++)
        {
            var img = new Image();
            img.onload = BildGeladen;
            img.src = BilderVorladen.arguments[i];
            
            document.Vorladen.push( img );
        }
    }
}

window.onload = function init() {
           BilderVorladen('_images/bild1.jpg','_images/bild2.jpg','_images/bild3.jpg');
}
//-->
</script>

...

<img id='vorlade_gif' src='bla.gif'>

das müsste funktionieren.
 
Hallo,

ich habe jetzt die HTML mit der Javascript syntax hochgeladen:
link.

Der preloader wird mir angezeigt allerdings bauen sich die bilder dynamisch im hintergrund auf.
Ist es möglich das die Bilder erst angezeigt werden wenn alle Bilder vorgeladen wurden oder liegt evtl. noch ein fehler in der syntax vor?
Desweiteren wird das vorlade.gif im IE6 nicht nach beenden des Ladenvorgangs ausgeblendet sondern ist weiterhin auf dem Bildschirm sichtbar.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<script  type="text/javascript">
<!--

function BildGeladen() {
    document.Geladen++;
    if( document.Geladen == document.Vorladen.length ) {
        document.getElementById( "vorlade_gif" ).style.display = "none";
    }
}

function BilderVorladen()
{
    document.Vorladen = new Array();
     document.Geladen = 0;
     
     document.getElementById( "vorlade_gif" ).style.display = "block";
     
    if(document.images)
    {
        for(var i = 0; i < BilderVorladen.arguments.length; i++)
        {
            var img = new Image();
            img.onload = BildGeladen;
            img.src = BilderVorladen.arguments[i];
            
            document.Vorladen.push( img );
        }
    }
}

window.onload = function init() {
           BilderVorladen('bild1.jpg','bild2.jpg','bild3.jpg');
}
//-->
</script>
</head>

<body>

<img id='vorlade_gif' src='vorlade.gif' style="margin:300px 0 0 300px;">
<img src="bild1.jpg">
<img src="bild2.jpg">
<img src="bild3.jpg">

</body>
</html>
 
Natürlich bauen sie sich auf. Damit das nicht geschiet müsstest du sie nach dem laden dynamisch setzten...

Code: 
function BildGeladen() {
   document.Geladen++;
    if( document.Geladen == document.Vorladen.length ) {
      document.getElementById( "vorlade_gif" ).style.display = "none";

      document.getElementById( "ein_bild" ).src = "ein_bild.jpg";
      document.getElementById( "zwei_bild" ).src = "zwei_bild.jpg";
    }
}
...
<img src='bitte_warten_bild.gif' id='ein_bild'>
<img src='bitte_warten_bild.gif' id='zwei_bild'>

oder wahlweise:

Code: 
function BildGeladen() {
   document.Geladen++;
    if( document.Geladen == document.Vorladen.length ) {
      document.getElementById( "vorlade_gif" ).style.display = "none";

      document.getElementById( "ein_bild" ).style.display = "block";
      document.getElementById( "zwei_bild" ).style.display = "block";
    }
}
...
<img src='bild1.jpg' id='ein_bild' style='display: none;'>
<img src='bild2.jpg' id='zwei_bild' style='display: none;'>

zum IE kann ich nichts sagen, benutze linux, müsste aber eigentlich auch funktionieren... hm
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück