Ladeanzeige bis nächste Grafik geladen ist

[xfoto]

Hallo!

Versuche HIER gerade, meine Website ein wenig umzubauen. Die Funktionalität passt mir persönlich so weit.

ABER:
Je nach Verbindungsgeschwindigkeit bzw. Dateigröße der einzelnen Fotos kann das Anzeigen des nächsten Fotos eine Weile dauern. Beim Versuch mit ein paar Leuten ergab sich jedesmal das Problem, dass - unwissend - wegen verzögerter Nachladung öfters "ungeduldig" weitergeklickt wurde womit dann einige Fotos übersprungen wurden. Die Leute gaben danach an, dass sie schon gewartet hätten wenn ihnen gezeigt worden wäre, dass erst geladen werden muss.

So weit so schlecht:
Ich suche mir den A.... wund aber ich finde keinen für mich hilfreichen Tipp, der mir IN ETWA zeigt, in welche Richtung ich die Anzeige eines Ladebalkens realisieren kann.

Es ist mir klar: Ladeanzeige-gif als Hintergrund dorthin, wo das Foto sitzt, und für die Zeit des Nachladens die Deckkraft des aktuellen Fotos auf null oder auf invisible oder dergleichen setzen.

***** Aber WIE ich das in mein Galerie-JS reinbringe .... Hilfe ;-) *****

So ist der IST-Stand:

fotos = new Array  
var i = 1  
  
//Mausklick für voriges oder nächstes Foto  
function voriges()  
{ if (i != 1) { i --; } else { i = AnzPic; }  
  zaehlen ();  
}  
function naechstes()  
{ if (i != AnzPic) { i ++; } else { i = 1; }  
  zaehlen ();  
}  
  
//"aktives_foto" in HTML mit neuem Foto ersetzen  
function zaehlen()  
{ document.aktives_foto.src = fotos[i]; }  

im HTML-Teil:
<img id="foto" alt="" name="aktives_foto" src="fotos/menschen/01.jpg">

[1UnitedPower]

Um den Lade-Indikator kommst du damit nicht herum, aber du kannst dem User-Agent mitteilen, dass er die Bilder vor-cachen soll.

https://developer.mozilla.org/en-US/docs/Link_prefetching_FAQ
http://www.w3.org/html/wg/drafts/html/master/links.html#link-type-prefetch

[JürgenB]

Hallo xfoto,

wäre das was für dich?

http://forum.de.selfhtml.org/archiv/2013/2/t212779/#m1453826

Gruß, Jürgen

[xfoto]

Hallo xfoto,

wäre das was für dich?

http://forum.de.selfhtml.org/archiv/2013/2/t212779/#m1453826

Vielen Dank - habs jetzt stundenlang analysiert - ich checks nicht ... ;-(

Habs nicht geschafft, es in die SEITE einzubauen.

Hier sind die springenden Teile, wo dies vermutlich irgendwo/-wie reingehört:

Anzeiges des Fotos im HTML:
<img id="foto" alt="" name="aktives_foto" src="fotos/test/01.jpg">

Skript, um die img-src des nächsten Foto´s zuzuweisen:

function zaehlen()  
{ document.aktives_foto.src = fotos[i]; }

Danke, Jürgen

[JürgenB]

Hallo xfoto,

function zaehlen()

{ document.aktives_foto.src = fotos[i]; }

  
hiermit zeigst du das nächste Bild, wobei es wegen der Ladezeit zu einer Kunstpause kommen kann. Statt dessen kannst du ein Wartebild anzeigen, bis das eigenliche Bild geladen ist:  
  
~~~javascript
function zaehlen() {  
  document.aktives_foto.src = Wartebild.jpg;  
  var img = new Image();  
  img.onload = function() {  
    document.aktives_foto.src = img.src;  
  }  
  img.src = fotos[i]";  
}

Statt dessen könntest du auch das Wartebild (teiltransparent) über das eigentliche Foto legen und dann ein. bzw. ausblenden.

Gruß, Jürgen

[JürgenB]

Hallo,

document.aktives_foto.src = Wartebild.jpg;

document.aktives_foto.src = "Wartebild.jpg";

muss da stehen.

Gruß, Jürgen

[xfoto]

Statt dessen kannst du ein Wartebild anzeigen, bis das eigenliche Bild geladen ist:

function zaehlen() {

document.aktives_foto.src = Wartebild.jpg;
  var img = new Image();
  img.onload = function() {
    document.aktives_foto.src = img.src;
  }
  img.src = fotos[i]";
}

  
Super danke! - [FUNKTIONIERT](http://xfoto.at/xfoto/test.html)!  
  
Aber alter Schwede:  
Das verlorene " hier `img.src = fotos[i]";`{:.language-javascript}  
hat mich zur Verzweiflung getrieben bis ich draufgekommen bin ;-)  
  
  

> Statt dessen könntest du auch das Wartebild (teiltransparent) über das eigentliche Foto legen und dann ein. bzw. ausblenden.  
  
Hab hier versucht, die Deckkraft für die Ladezeit auf 0.1 herabzusetzen - das ladezeit.gif liegt als HG hinter dem Foto - und nach Ladung des neuen Fotos die Deckkraft wieder auf 1 zu setzen. Klappte nicht, wo muss ich denn die img.style.opacity = '1'; setzen?  
  
~~~javascript
function zaehlen() {  
  document.aktives_foto.style.opacity = '0.1';  
  var img = new Image();  
  img.onload = function() { document.aktives_foto.src = img.src; }  
  img.src = fotos[i];  
  img.style.opacity = '1'; //geht nicht  
}

[xfoto]

function zaehlen() {

document.aktives_foto.style.opacity = '0.1';
  var img = new Image();
  img.onload = function() { document.aktives_foto.src = img.src; }
  img.src = fotos[i];
  img.style.opacity = '1'; //geht nicht
}

  
Ahhh doch [geschafft](http://xfoto.at/xfoto/test.html):  
~~~javascript
function zaehlen() {  
  document.aktives_foto.style.opacity = '0';  
  var img = new Image();  
  img.onload = function() {  
    document.aktives_foto.src = img.src;  
    document.aktives_foto.style.opacity= '1'; }  
  img.src = fotos[i];  
}

Könnte mir das nur jemand mal kurz erläutern:

in der Funktion zaehlen wird
1. das img mit Name "aktives_foto" auf null Deckkraft gesetzt (+ somit gif sichtbar)
2. eine Variable img wird erzeugt: wozu?
3. wenn das Event onload (=sobald fertiggeladen??) des Elementes img passiert wird die nachfolgende Funktion (a.+b.) ausgeführt
3a. es wird document.aktives_foto.src auf img.src "gekürzt"
3b. "aktives_foto" wird wieder auf 100% Deckkraft gesetzt
4. img.src (was = ist mit document.aktives_foto.src) holt sich das neue Foto

Die Reihenfolgen und auch Sinnhaftigkeiten verstehe ich großteils nicht, würde aber gerne ..... ;-(

[JürgenB]

Hallo xfoto,

in der Funktion zaehlen wird

1. das img mit Name "aktives_foto" auf null Deckkraft gesetzt (+ somit gif sichtbar)
2. eine Variable img wird erzeugt: wozu?

das ist ein Imageobjekt, damit kann man z.B. Bilder vorladen.

3. wenn das Event onload (=sobald fertiggeladen??) des Elementes img passiert wird die nachfolgende Funktion (a.+b.) ausgeführt

genau. Du willst ja warten, bis das Bild geladen ist. Dazu wird hier das Imageobjekt benötigt.

3a. es wird document.aktives_foto.src auf img.src "gekürzt"

da wird nichts gekürzt, da wird das Bild in die Seite eingebaut. Statt img.src hätte ich auch fotos[i] nehmen können.

3b. "aktives_foto" wird wieder auf 100% Deckkraft gesetzt
4. img.src (was = ist mit document.aktives_foto.src) holt sich das neue Foto

hier wird die Eigenschaft src des Imageobjektes gesetzt, um das Bild zu laden.

Gruß
Jürgen

[xfoto]

Hallo xfoto,

in der Funktion zaehlen wird
[...]
hier wird die Eigenschaft src des Imageobjektes gesetzt, um das Bild zu laden.

Gruß
Jürgen

Danke für die Erläuterungen!

[micha2013]

Moin,

Die Leute gaben danach an, dass sie schon gewartet hätten wenn ihnen gezeigt worden wäre, dass erst geladen werden muss.

mir wird da nichts angezeigt, dass nachgeladen wird (FF 20). Glaube das nennt sich Dialog-Blocker oder so änlich, aber da ist nichts von zu bemerken.