[GELÖST] während Refresh eines Bildes Animation anzeigen

[j-l-n]

Ich verwende folgendes Skript, um ein Bild auf klick neuzuladen (da es sich um ein Captcha handelt):

function reload(ID){
 "use strict";
 var img = document.getElementById(ID);
 var src = img.src;
 var date = new Date();
 img.src = src + '?get_new=' + date.getTime();
 return false;
}

Nun möchte ich während das neue Bild geladen wird, eine Animation anzeigen. Folgende Erweiterung zeigt jedoch nur die Animation und lädt nicht das Bild neu:

function reload(ID){
 "use strict";
 var img = document.getElementById(ID);
 var src = img.src;
 img.src = "loading.gif";
 setTimeout("refresh()", 2000);
   function refresh(){
     var date = new Date();
     img.src = src + '?get_new=' + date.getTime();
     return false;
  }
}

 

[kkapsner]

Da steht etwas in der Fehlerkonsole...

... und der Fehler kommt daher, dass du window.setTimeout() einen String als Parameter übergibst und keine Funktionsreferenz...

Aber der ganze Ansatz ist nicht ideal, da du 2s Ladezeit verschenkst. Mach' das erneute Zuweisen an img.src doch im onload des "loading.gif".

 

[j-l-n]

Mach' das erneute Zuweisen an img.src doch im onload des "loading.gif".

Also dann so?

function reload(ID){
 "use strict";
 var img = document.getElementById(ID);
 var src = img.src;
 img.src = "loading.gif";
 img.onload =  function(){
     var date = new Date();
     img.src = src + '?get_new=' + date.getTime();
     return false;
 }
}

PS: hatte den Code noch schnell mit dem Tablet eingefügt - da finde ich leider keine Fehlerkonsole...

 

[kkapsner]

Auch im Tablet sollte da irgendwo eine sein...

Ich würde das .onload zuweisen, bevor du .src setzt. In älteren IEs feuert das onload sonst nicht, wenn das Bild schon im Cache ist.
Zusätzlich musst du natürlich das .onload wieder zurücksetzten, da du sonst eine unendliche Ladereihe bekommst.

PS: für was ist das return false; am Schluss gut?

 

[j-l-n]

Auch im Tablet sollte da irgendwo eine sein...

Hab leider bisher noch keine gefunden. Das return false bewirkt, dass der Browser dem Link nicht folgt.

 

[kkapsner]

Das ist aber im .onload drin... das muss dann da raus und als Rückgabewert der reload() rausgegeben werden.

 

[j-l-n]

Ich würde das .onload zuweisen, bevor du .src setzt. [..]
Zusätzlich musst du natürlich das .onload wieder zurücksetzten, da du sonst eine unendliche Ladereihe bekommst.

Wo genau würdest du denn das onload zuweisen?
Und folgendes stoppt leider die Funktion nicht:

img.onload = function(){
     if(stopp != "ja"){
          var date = new Date();
          img.src = src + '?get_new=' + date.getTime();
          var stopp = "ja";
     }
}

 

[j-l-n]

Und folgendes stoppt leider die Funktion nicht:

img.onload = function(){
     if(stopp != "ja"){
          var date = new Date();
          img.src = src + '?get_new=' + date.getTime();
          var stopp = "ja";
     }
}

Einmal das; und gibt es denn eigentlich keinen eleganteren Weg, .onload "nur einmal" auszuführen?

 

[kkapsner]

Das stoppt nicht, weil "stopp" ja eine lokale Variable ist, die bei jedem Funktionsaufruf neu initialisiert wird und deswegen bei der Abfrage immer undefined ist.

Mach' doch einfach:

img.onload = function(){
	this.onload = null;
	var date = new Date();
	this.src = src + '?get_new=' + date.getTime();
}

 

[j-l-n]

Das stoppt nicht, weil "stopp" ja eine lokale Variable ist, die bei jedem Funktionsaufruf neu initialisiert wird und deswegen bei der Abfrage immer undefined ist.

Ach ja, stimmt. Über eine globale würde es dann gehen - aber die zu verwenden ist ja nicht so toll
Danke für deine Hilfe, Problem gelöst!

 

[j-l-n]

Folgendes noch: ich möchte - während das "Loading..."-Bild angezeigt wird - die Bildgröße ändern, da dieses sonst verzerrt dargestellt wird. Anschließend soll es wieder auf die normale Größe geändert werden.
Folgendes klappt nicht:

function reload(ID){
"use strict";
var img = document.getElementById(ID);
var src = img.src;
img.height = 11;
img.width = 16;
img.src = "loading_bar.gif";
img.onload = function(){
this.onload = null;
var date = new Date();
img.src = src + '?get_new=' + date.getTime();
}
img.height = 25;
img.width = 80;
return false;
}

 

[j-l-n]

Und wenn ich nur

img.height = 11;
img.width = 16;

ohne Zurückändern verwende, bleibt das Bild logischerweise verzerrt...

 

[kkapsner]

Das Zurücksetzen der Bildgröße muss natürlich auch im .onload stattfinden.

 

[j-l-n]

Das Zurücksetzen der Bildgröße muss natürlich auch im .onload stattfinden.

Stimmt. Danke!
________
GELÖST

 

[kkapsner]

Bitte - gern geschehen.