✔ [IE7] Event onload bei Image-Objekt wird nicht ausgeführt

Benzol · 8. November 2010

Guten Abend Leute,
arbeite grade an unserer neuen Galerie und wunder mich etwas über das Verhalten des IE7.

Ich habe eine Vorschaubild-Galerie die in Zufälliger Reihenfolge, aber erst nach erfolgtem Vorladen einzeln eingeblendet werden soll. FF, Opera, Safari und Android machen's, wie ich mir das gedacht habe. Nur der IE7 zeigt nur ein Bild an. Das Event wird nur bei einem Image-Objekt ausgeführt. Könnt Ihr mal schauen, ob es beim IE8 oder 9 auch auftritt... und -überhaupt warum?!

Momentanen Entwicklungsstand findet Ihr hier. Wäre für Eure Hilfe sehr Dankbar. Geht um folgenden Code-Teil

Code:

function thumbnailAppear(key)
		{	
			//Ladeanimation ausbleden
 			new Effect.Fade($("thumb"+key),
			{  
				duration: 0.1, //Je größer, desto länger dauert es, bis ALLE Bilder eingeblendet werden
				queue: 'end', //Wird an's Ende gestellt damit nicht alle auf einmal erscheinen
				afterFinish: function()
				{  	 
					//Wenn li ausgeblendet, neuen Hintergrund zuweisen...
					$("thumb"+key).style.background = "url("+thumbnails[key]+")"; 
					//...und einblenden
					new Effect.Appear($("thumb"+key),
					{	 
						duration: 0.3, //Kann verändert werden, um sauberes Einblenden zu gewährleisten
						afterFinish: function()
						{
							loaded = loaded+1; //Wird noch nicht gebraucht
						}
					});	 
				}
			});		
		}  
		
		load_img = new Array();
		//Vorschaubilder_ID's durchlaufen
		while(thumb = thumbnail_ids.shift())
		{ 	 
			//Dazugehörige src aus Array lesen
			thumbnail = thumbnails[thumb];
			//Einem neuen Bild zuweisen
			load_img[thumb] = new Image();
			load_img[thumb].src = thumbnail;	
			//Wenn Bild geladen, erscheinen lassen
			load_img[thumb].onload = thumbnailAppear(thumb);
		}

Habe load_img zu einem Array gemacht, da ich dachte, das der IE vllt. das Objekt beim nächsten Schleifendurchlauf überschreibt und deswegen nicht fertig lädt. Daran scheint es aber nicht gelegen zu haben.

Quaese · 9. November 2010

Hi,

deine Zuweisung an den Eventhandler

Code:

load_img[thumb].onload = thumbnailAppear(thumb);

ist nicht korrekt.

Versuch es stattdessen so:

Code:

load_img[thumb].onload = function(){
  thumbnailAppear(thumb);
}

Ciao
Quaese

Benzol · 9. November 2010

Hey, das ist schon eine coole Idee... nur habe ich jetzt das Problem, das die Variable thumb nicht an die onload-Funktion übergeben wird. Aber eigentlich ist sie doch Global, oder verstehe ich da etwas falsch?
Wie kann ich die Variable thumb für function() lesbar machen?

EDIT:
Gäbe es nicht die Möglichkeit in der vom Event-Handler aufgerufenen Funktion abzufragen, von welchem Objekt das Event ausgelöst wird? Wenn ich so an die ID des Objektes komme, würde mir das auch schon reichen.

EDIT2:
Aha, siehe da

Da an die Funktion, die vom Event aufgerufen wird, auch das Event-Objekt übergeben wird, gibt mir target das, was ich brauche um weiter zu arbeiten. Hat denn MS das auch endlich mal mit eingebaut oder muss ich da srcElement verwenden?

Quaese · 9. November 2010

Hi,

ok, hatte nicht gesehen, dass es sich bei thumb um eine "Laufvariable" handelt.

Versuch es mal so:

Code:

load_img[thumb].onload = new Function("fx", "thumbnailAppear('"+thumb+"')");

Ansonsten wäre es hilfreich, wenn du deinen Link aktualisieren könntest. Denn mit localhost kann ich wenig anfangen ;-)

Ciao
Quaese

Benzol · 9. November 2010

OMG, wie peinlich... schon so lange dabei und dann so ein Fehler. Ich denke, ich sollte weniger trinken wenn ich code

Hier findest du das besagt Script, gleich mit deiner vorgeschlagenen Änderung.
Immerhin läd der IE jetzt schon 2 Bilder! Ich liebe Ihn...

Mein zweiter Gedankengang funktioniert bei onmouseover für die DIV's prächtig. Ich ziehe mir meinen internen Zeiger einfach aus der ID des Elementes, welches das Event ausgelöst hat. Beim vorladen ist dies jedoch nicht möglich, da meine Image() Objekte keine ID besitzten. Und mein verzweifelter Versuch load_img.id = "blub" hat leider auch nicht funktioniert

Quaese · 10. November 2010

Hi,

ok, mit dem onload-Event scheint dem IE hier nicht beizukommen zu sein. Du könntest es stattdessen mit einem Preloader versuchen.

Beispiel:

Code:

// ID-Array für Vorschaubilder
var thumbnail_ids = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26");
var thumbnails = new Array('images/galerie/1/image68_thumbnail.jpg', 'images/galerie/1/image67_thumbnail.jpg', 'images/galerie/1/image66_thumbnail.jpg', 'images/galerie/1/image65_thumbnail.jpg', 'images/galerie/1/image64_thumbnail.jpg', 'images/galerie/1/image63_thumbnail.jpg', 'images/galerie/1/image62_thumbnail.jpg', 'images/galerie/1/image61_thumbnail.jpg', 'images/galerie/1/image60_thumbnail.jpg', 'images/galerie/1/image59_thumbnail.jpg', 'images/galerie/1/image58_thumbnail.jpg', 'images/galerie/1/image57_thumbnail.jpg', 'images/galerie/1/image56_thumbnail.jpg', 'images/galerie/1/image55_thumbnail.jpg', 'images/galerie/1/image54_thumbnail.jpg', 'images/galerie/1/image53_thumbnail.jpg', 'images/galerie/1/image52_thumbnail.jpg', 'images/galerie/1/image51_thumbnail.jpg', 'images/galerie/1/image50_thumbnail.jpg', 'images/galerie/1/image49_thumbnail.jpg', 'images/galerie/1/image48_thumbnail.jpg', 'images/galerie/1/image47_thumbnail.jpg', 'images/galerie/1/image46_thumbnail.jpg', 'images/galerie/1/image45_thumbnail.jpg', 'images/galerie/1/image44_thumbnail.jpg', 'images/galerie/1/image43_thumbnail.jpg', 'images/galerie/1/image42_thumbnail.jpg');
var pictures = new Array('images/galerie/1/image68.jpg', 'images/galerie/1/image67.jpg', 'images/galerie/1/image66.jpg', 'images/galerie/1/image65.jpg', 'images/galerie/1/image64.jpg', 'images/galerie/1/image63.jpg', 'images/galerie/1/image62.jpg', 'images/galerie/1/image61.jpg', 'images/galerie/1/image60.jpg', 'images/galerie/1/image59.jpg', 'images/galerie/1/image58.jpg', 'images/galerie/1/image57.jpg', 'images/galerie/1/image56.jpg', 'images/galerie/1/image55.jpg', 'images/galerie/1/image54.jpg', 'images/galerie/1/image53.jpg', 'images/galerie/1/image52.jpg', 'images/galerie/1/image51.jpg', 'images/galerie/1/image50.jpg', 'images/galerie/1/image49.jpg', 'images/galerie/1/image48.jpg', 'images/galerie/1/image47.jpg', 'images/galerie/1/image46.jpg', 'images/galerie/1/image45.jpg', 'images/galerie/1/image44.jpg', 'images/galerie/1/image43.jpg', 'images/galerie/1/image42.jpg');
var loaded = 0; //Wird noch nicht gebraucht

// Vorschaubilder-ID's mischen
thumbnail_ids.shuffle();


function thumbnailAppear(key){
  //Ladeanimation ausbleden
  new Effect.Fade($("thumb"+key),
  {
    duration: 0.1, //Je größer, desto länger dauert es, bis ALLE Bilder eingeblendet werden
    queue: 'end', //Wird an's Ende gestellt damit nicht alle auf einmal erscheinen
    afterFinish: function()
    {
      //Wenn li ausgeblendet, neuen Hintergrund zuweisen...
      $("thumb"+key).style.background = "url("+arrPre[key].src+")";
      //...und einblenden
      new Effect.Appear($("thumb"+key),
      {
        duration: 0.3, //Kann verändert werden, um sauberes Einblenden zu gewährleisten
        afterFinish: function()
        {
          //Mouseover zuweisen
          $("thumb"+key).onmouseover = enlarge;
          loaded = loaded+1; //Wird noch nicht gebraucht
        }
      });
    }
  });
}


// Bildarray erstellen
var arrPre = [];
for(var i=0; i<thumbnails.length; i++){
  arrPre[arrPre.length] = new Image();           // Bildobjekt
  arrPre[arrPre.length-1].src = thumbnails[i];   // Bildquelle
  arrPre[arrPre.length-1].loaded = 0;            // Als nicht geladen markieren
}

// Preloader
function checkLoad(){
  var intNotLoaded = 0;
  // Bildarray durchlaufen
  for(var i=0; i<arrPre.length; i++){
    // Falls das aktuelle Bild bisher noch nicht geladen wurde UND nun fertig geladen ist
    if((arrPre[i].loaded==0) && (arrPre[i].width>0)){
      arrPre[i].loaded = 1;  // Als geladen markieren
    }else{
      intNotLoaded++;        // Falls das aktuelle Bild noch nicht geladen ist -> Zähler inkrementieren
    }
  }

  // Falls der Zähler grösser Null ist, dh. dass noch Bilder zum Laden vorliegen
  if(intNotLoaded>0){
    // Preloader erneut aufrufen
    checkLoad();
  }else{
    // Falls alle Bilder geladen sind -> in zufälliger Reihenfolge anzeigen
    for(var thumb=0; thumb<thumbnail_ids.length; thumb++){
      thumbnailAppear(parseInt(thumbnail_ids[thumb]));
    }
  }
}

// Preloader-Funktion aufrufen
checkLoad();


function enlarge(e){
  if(!e) var e = window.event;
  if(e.target) obj = e.target;
  else if(e.srcElement) obj = e.srcElement;

  var key = obj.id.substr(5, obj.id.length);
}

Ciao
Quaese

Benzol · 11. November 2010

Wow, danke für die Arbeit die du dir gemacht hast! Das ganze funktioniert auch wunderbar im IE, FF und Opera - nur leider gibt's beim Safarie nen RangeError: Maximum call stack size exceeded.
Hab da grade mal nen bissl nach gegoogelt, kann mir aber ehrlich gesagt keinen Reim drauf machen. Scheint ein Problem mit der neuen JS-Enginge zu sein, die bei V5 rein gekommen ist.
Weist du was der Fehler zu bedeuten hat?

EDIT
Muss mich korrigieren... FF machts beim ersten Aufruf der Seite auch. Bekomme nen too much recursion Fehler.
Dabei ist's so logisch! Verstehe das nicht...
Am besten ne Weiche einbauen, der meine erste Variante für die anderen Browser nimmt und deine für den IE. Meinste das macht Sinn?

EDIT2
Hmm, seltsamerweise funktioniert es im IE nun auch nicht mehr.

Quaese · 12. November 2010

Hi,

ja, der Preloader ist etwas "daneben" ... kann gar nicht funktionieren.

Versuch es mal hiermit:

Code:

var intLoaded = 0;
// Preloader
function checkLoad(){
  // Bildarray durchlaufen
  for(var i=0; i<arrPre.length; i++){
    // Falls das aktuelle Bild bisher noch nicht geladen wurde UND nun fertig geladen ist
    if((arrPre[i].loaded==0) && (arrPre[i].width>0)){
      arrPre[i].loaded = 1;  // Als geladen markieren
      intLoaded++;
      checkLoad();
      return;
    }
  }

  // Falls alle Bilder geladen wurden
  if(intLoaded==arrPre.length){
    // Falls alle Bilder geladen sind -> in zufälliger Reihenfolge anzeigen
    for(var thumb=0; thumb<thumbnail_ids.length; thumb++){
      thumbnailAppear(parseInt(thumbnail_ids[thumb]));
    }
  }else{
    window.setTimeout(function(){checkLoad();}, 10);
  }
}

Ciao
Quaese

Benzol · 14. November 2010

Super, Quase! Ein FETTES Danke an Dich! Du hast mir wirklich weiter geholfen.

Habe ich das jetzt richtig gesehen, das du einen Timeout gesetzt hast, um das Problem mit den zu schnellen Aufrufen zu lösen?

✔ [IE7] Event onload bei Image-Objekt wird nicht ausgeführt

Benzol

Erfahrenes Mitglied

Quaese

Moderator

Benzol

Erfahrenes Mitglied

Quaese

Moderator

Benzol

Erfahrenes Mitglied

Quaese

Moderator

Benzol

Erfahrenes Mitglied

Quaese

Moderator

Benzol

Erfahrenes Mitglied

Neue Beiträge