Ladebalken nach laden durch bild ersetzen

luki.boy · #1 (**permalink**) 31.03.2011, 19:40

Hi

ich möchte auf meiner seite in einem beschränkten Bereich ( div )
ein bild anzeigen, welches vorher mit einem ladebalken ( am besten in % )
vorgeladen wird! Der Ladebalken muss nicht aus Java Script
bestehen, er kann auch eine .gif - Animation sein...
Aber ohne dass man auf eine neue seite verlinkt wird!

kann mir da jemand helfen?

danke im voraus

behalx · #2 (**permalink**) 03.04.2011, 10:46

Vll. kann dir das weiterhelfen:

Ajaxload - Ajax loading gif generator

... wobei es dort keine prozentualen Angaben gibt (aber wer braucht das schon).

luki.boy · #3 (**permalink**) 03.04.2011, 14:38

Danke aber einen Ladebalken oder ein Ladesymbol kann ich selber erstellen, mir geht es um den Code: ein Bild in einem div mit einem Ladezeichen zu laden und nach laden des bildes das bild anzeigen zu lassen...

Danke trozdem...

xm22 · #4 (**permalink**) 07.04.2011, 10:36

Es gibt für alle per http geladenen Objekte eine Eigenschaft "complete". Sie ist false, bis das Objekt (Hier das Bild) komplett geladen wurde. Die kannst Du dafür in Zusammenhang mit window.setInterval benutzen.
Also etwa so:

Code:

//Lade-Icon anzeigen und Bild in nicht sichtbarem img-Element laden...
var loadingInterval = window.setInterval(function() {
    if (<bild>.complete) {
        window.clearInterval(loadingInterval);
        //Lade-Icon gegen geladenes Bild tauschen
    }
}

luki.boy · #5 (**permalink**) 08.04.2011, 20:19

Ok danke danke

Aber wie muss ich das in meinen html code einfügen? Steht das da oder bin ich blöd? Und wo ist die lade-symbol-url angegenen? Die bild-url steht da ja aber die lade-symbol-url?

luki.boy · #6 (**permalink**) 14.04.2011, 17:10

HALLO ???????
Ich brauche hilfe ich weiß nähmlich nicht, wo und wie ich diesen code in mein Html einbinden könnte ich versteh ihn auch nicht so ganz

Ich möchte eine Grafik in einem div mit ladesymbol ankündigen, und dann durch geladene Grafik ersetzten.
In etwa wie
http://www.huddletogether.com/projects/lightbox2/
hier, wenn auf ein Beispiel ( Example -> Single Images ) geklickt wird nur, dass kein Fenster "aufgeht" sondern schon da ist und das Ladesymbol auch...

luki.boy · #7 (**permalink**) 22.04.2011, 19:18

Ok nochmal wenn die Frage nicht richtig verstanden worden ist:

Also ich möchte in einem div ein Ajax-Loader anzeigen.
Soweit nicht schwer:

Code:

<img src="ajax-loader.gif" />

So natürlich soll der Loader auch etwas tun, na nicht das bild aber hinter dem Bild soll eine Funktion stecken.
Und zwar soll ein großes Bild geladen werden und nach dem Laden angezeigt werden.
Was ich kann:
-Ich kann ein Bild vorladen z.B. eine weiße Seite nur zwei-drei links und wenn mann auf einen link klickt öffnet sich eine Seite welche ein anspruchsvolles BG-Bild hat. Nun kann ich dafür sorgen, dass das Bild schon auf der weißen Seite geladen wird:

Code:

<script language="javascript">

  var Grafik = new Image()
  Grafik.src = "bg.jpg"

</script>

-ich kann ebenfalls ein bild durch ein anderes ersetzen:

Code:

<html>
<head>
<script language="javascript">
    Normal1 = new Image();
    Normal1.src = "images/bild1.png";
    Highlight1 = new Image();
    Highlight1.src = "images/bild2.png";
  

    function Bildwechsel(Bildnr,Bildobjekt)
    {
    window.document.images[Bildnr].src = Bildobjekt.src;
    }
</script>
</head>
<body>
<img src="images/bild1.png" onklick="Bildwechsel(0)" />
</body>
</html>

aber wie kann ich diese Codes miteinander verbinden???

Borsti · #8 (**permalink**) 22.04.2011, 19:41

Zitat:

Zitat von luki.boy

aber wie kann ich diese Codes miteinander verbinden???

Ich würde das Ganze so machen:

Code:

<script language="javascript">

	var picture = new Array(2);
	var currentpic = 0;

	for (var i=0; i < picture.length; ++i) {
		picture[i]	= new Image();
	}
	picture[0].src 	= "http://xhtmlforum.de/images/bild1.png";
	picture[1].src 	= "http://xhtmlforum.de/images/bild2.png";
  
    function Bildwechsel(Bildnr) {
        
    	if(currentpic == picture.length) {
    		currentpic = 0;
    	} else {
    		currentpic++;
    	}
    	
    	window.document.images[Bildnr].src = picture[currentpic].src;
    }
</script>

Gebe aber keine Garantie drauf

Zum Thema empfehle ich:
--> SELFHTML: JavaScript / Objektreferenz / images

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Uberschrift durch Bild ersetzen - Suchmaschinenfreundlich	made.by.kaufmann	CSS	1	22.08.2009 00:47
bild neu laden	markuskoehler	Javascript & Ajax	8	15.09.2008 15:03
Link durch Bild ersetzen	Padde	CSS	6	02.07.2008 11:34
Link durch Bild ersetzen!	jenny79	CSS	3	25.11.2007 18:57
Bildergalerie: Erstes Bild beim Laden der Seite sichtbar	Angares	CSS	1	02.02.2007 16:32