Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

beim Nachladen von Bildern Erfolg feststellen





Frage

Hallo Experten, ich weise <img> per Javascript neue Bilder zu. Gibt es irgendeine Möglichkeit, festzustellen, ob die Bilder auch gefunden wurden? Ich würde in diesem Fall gern andere Bilder laden. (Die Eigenschaft complete ist mir bekannt, aber im broken-Image-Fall ist diese bei mir auch true) Danke, Manfred

Antwort 1 von _abschweb_

Dank der Tatsache, dass zumindest der IE beim selbsterstellten Image-Objekt den Ladevorgang schön mit complete true abschließt und wenn die Datei nicht gefunden wird false bleibt - im Gegensatz zum document.images-Objekt, wo complete immer true bleibt - habe ich das Problem zumindest für den IE gelöst. Es bleibt die Frage: Gibt es im FF irgendeine Möglichkeit, diesen Sachverhalt zu erkennen?

Manfred

Antwort 2 von katy

Hallo Manfred,

du kannst einem image-Objekt einen onload-event mitgeben, der "feuert" dann, wenn das Bild geladen ist.

katy

Antwort 3 von kicia

Hallo,
Du könntest "onload" benutzen (oder "onerror").

BildObjekt.onload = function () { alert( this.src + " ist geladen"); };


Antwort 4 von _abschweb_

Hallo katy, hallo Kicia,

ich hab onload getestet, funktioniert in IE und FF, super, danke!

Manfred

Antwort 5 von _abschweb_

Ich fand es nützlich für den Zweck im Image-Objekt eine Eigenschaft ok zu haben. Sowas hab ich noch nie gemacht. Nach dem Buch "Javascript Praxisbuch" von Gamperl / Nefzger habe ich dafür codiert:


Image.prototype.ok = false;


Überraschung 1:
Weder IE noch FF kennen diesen Konstrukt.

Überraschung 2:
Als ich diese Zeile entfernt hatte, funktionierte mein Skript!
Obwohl ich die Eigenschaft ok einfach so verwende.

Ich kann also einem mit new erzeugten Objekt eine Eigenschaft zufügen, indem ich diese einfach benutze. Spektakulär!
Ich habe diesen Sachverhalt noch nirgends gesehen, auch nicht in SelfHTML.

Manfred

Antwort 6 von katy

Hallo Manfred,

das konnte so nicht funktionieren, da du einem prototype eine Referenz auf eine Funktion übergeben musst, quasi ein Muster, was die neue Methode macht.

Image.prototype.ok = function () {
return false;
}

könntest du nun nutzen und abfragen

if (Bildobjekt.ok() )

wobei du die Funktion dann noch erweitern müsstest um irgendeine Bedingung die gelegentlich true zurückgibt.

Aber du wolltest ja auch keine Methode sondern eine Eigenschaft. Und da genügt die einfache Zuweisung wie du sie gemacht hast

Bildobjekt.ok=false;

So kannst du jederzeit in beliebigen Objekten neue Eigenschaften einbauen.

Letztlich ist nämlich die Erschaffung einer neuen JavaScript-Variablen auch nur eine neue Eigenschaft des übergeordneten Objekts, in der Regel des window-Objekts.
Also ist
x=7;
identisch zu
window.x=7;

katy

Antwort 7 von _abschweb_

Hallo Katy,

super, leuchtet ein. Danke!

Manfred

Antwort 8 von kicia

Hallo,
ich habe mich etwas gewundert, denn ich dachte, daß
Image.prototype.ok = false
eigentlich funktionieren sollte.

Ich habe ein bischen gegoogled und gelesen, daß der IE angeblich kein prototype für Image bereit stellt.
Bei meiner Recherche bei MS JScript habe ich dann gar nicht erst ein Image Object gefunden. Anscheinend wird das Image Objekt also bei MS irgendwie anders behandelt, als die anderen Objekte.
Ich werde mir das bei Gelegenheit nochmal genauer anschauen.

Ich habe es getestet, und bei mir hat es in Firefox funktioniert, in IE und Opera nicht.

Die prototype Lösung von Katy (mit der Funktion) hat bei mir übrigens in IE und Opera auch nicht funktioniert.

Gruß, kicia

Antwort 9 von kicia

Hallo nochmal,
tja, eigentlich logisch:

der Image()-Konstruktor ist gar kein Teil von Javascript.
Ich weiß gar nicht, wer (Browser? DOM?) eigentlich den Image() Konstruktor bereitstellt.
Anscheinend ist das Objekt, das dadurch erstellt wird ein normales DOM Objekt. Es läßt sich jedenfalls mit appendChild einfügen ( FF / IE / Opera ).

Eine Beschreibung des Image() Konstruktors habe ich immernoch nicht gefunden, aber für mich scheint nun klar, daß das DOM-Image-Objekt nicht die Eigenschaft "prototype" vom JavaScript-"Object"-Objekt erben muß.
Firefox hat demnach diese Eigenschaft in seine eigene Version des DOM übernommen.

Bleibt also (wenn ich mich nicht irre) nur der Weg, ein eigenes Javascript-Objekt mit der Eigenschaft "ok" zu erstellen, welches auf die DOM-Image-Objekte verweist (wenn es eine Eigenschaft sein soll).

Oder eben wie von Katy vorgeschlagen, jeder Instanz vom Image-Objekt die Variable "ok" hinzuzufügen.

Gruß, kicia

Antwort 10 von Friedel

Bleibt noch zu erwähnen, dass die onload-Lösung nicht standardkonform nach Html4.x ist und in vielen Browsern auch nicht funktioniert. Die Internet Explorer können damit bis einschließlich IE6 nichts anfangen. Der IE7 habe ich nicht. Bei anderen Browsern ist das Funktionieren von der Versionsnummer abhängig. Bei einigen Browsern wechselt das innerhalb eines Milestones mehrmals.

Antwort 11 von katy

Hallo Friedel,

ich vermute hier liegt ein Irrtum deinerseits vor. Es handelt sich um JavaScript und nicht HTML, insofern spiel der HTML-Standard 4.x (aktuell ist übrigens XHTML 1.x) keine Rolle.
Das einzige Problem, das ich mit der genannten Lösung kenne ist, dass manche Browser unter bestimmten Bedingungen den onload-Event beim Image-Objekt nicht "feuern", wenn das Bild schon im Cache liegt oder lokal ist.
Kannst du bitte die Browser nennen, die jünger als Netscape 4 sind, und mit dem Code oben von kicia wirklich Probleme haben. Ich würde das wirklich gern für meine Arbeit wissen, falls so etwas existiert, da es mir noch nie vorgekommen ist (übliche Testumgebungen: IE 6+7, Opera + FF in aktuellen Versionen, Safari).

katy

Antwort 12 von Friedel

@katy: Es geht um einen Eventhandler. Und er muss sowohl den Html-Regeln als auch JavaScript (bzw. ECMAScript) entsprechen. Und nach denen ist onload nur in den Elementen body und frameset erlaubt. Auch wenn einige Browser das auch in anderen Elementen verstehen. Als Eigenschaft gibt es onload nicht. Ich wüßte jedenfalls im Moment kein Objekt, das so eine Eigenschaft kennt.

Übrigens ist XHtml ein Nachfolger von Html. Die aktuelle Html-Version ist Html5.0 uns stammt vom 18.032008, ist also erst ein paar Tage alt. Es gibt bisher noch keine Browser, die das auch rendern können, sodass man sich vorläufig an den Vorgänger Html4.01 halten sollte.

Antwort 13 von katy

Hallo Friedel,

ich glaube mich zu erinnern, dass du schon mal so etwas behauptet hast. Damals war es wohl das window-Objekt, dem du ebenfalls den onload-Event abstreiten wolltest. Stimmts (ich kann den Thread nicht mehr finden)?

Du verwechselst hier onload-Event und onload-Attribut. Letzteres gibt es wirklich nur in HTML und ist da natürlich nur bei den Elementen zulässig, für die das W3C das vorsieht. Davon ist in kicias Code aber keine Rede. Hier wird einem Objekt eine Eigenschaft onload in Form der Referenz auf eine anonyme Funktion gegeben. Ab JavaScript Version 1.1 ist dies möglich. HTML spielt dabei keine Rolle. Kein HTML-Validator wird dazu irgendwas sagen, da er JavaScript komplett ignorieren muss, soweit es ordnungsgemäß eingebunden ist.

Unobstrusive ("barrierefreies") JavaScript ist zB. ohne diese Möglichkeiten der Zuweisung von Eventen als Eigenschaften zu Objekten gar nicht denkbar, denn eine der Kernforderungen ist ja die strikteste Trennung von HTML (Inhalt), JavaScript (Interaktivität, Dynamik) und CSS (Layout).

In SelfHTML ist leider gerade der JavaScript-Teil stark veraltet und daher überarbeitungsbedürftig. Daher kommen sinnvolle Beispiele dazu dort nicht vor.

In der Annahme dich nicht überzeugt zu haben wünscht eine gute Nacht

katy

Antwort 14 von Friedel

Stimmt. Das habe ich schon mal behauptet. Und alle Quellen, die ich bisher gefunden hatte, schreiben ganz klar, dass der Eventhandler (nicht Attribut) onload in Html und JavaScript nur in body und frameset erlaubt ist. Aber nach der hier verwendeten Syntax müsste es ja eine gar kein Eventhandler sondern eine Eigenschaft eines Objekts sein. Und die gint es für gar kein Objekt. Diese unpassende Eyntx hat mich jetzt auf die Idee gebracht mal in der Spezifikation für DOM nach zu sehen. Deine Behauptung stimmt im wesentlichen, obwohl das kein Standard sondern eine Empfehlung des W3C ist in es nicht bei JavaScript bzw. ECMAscript festgelegt ist sondern bei DOM. Jedenfalls steht in der Recommandation des W3C für DOM2
Zitat:
(on)load
The load event occurs when the DOM implementation finishes loading all content within a document, all frames within a FRAMESET, or an OBJECT element.
Bubbles: No
Cancelable: No
Context Info: None


Wieder was gelernt. Danke. Aber es funktioniert trotzdem nicht in allen Browsern.

Antwort 15 von katy

Hallo Friedel,

es ist zum Haare ausraufen in diesem Forum. Oder frage ich so unverständlich nach? Oder entgehen mir immer noch irgendwelche Feinheiten der Deutschen Sprache?
Du schreibst
Zitat:
Aber es funktioniert trotzdem nicht in allen Browsern
In meinem vorletzten Posting habe ich extra gebeten
Zitat:
Kannst du bitte die Browser nennen


Warum tust du das nicht einfach? Ich würde das wirklich gern wissen, bei welchen Browsern du festgestellt hast, dass es Probleme gibt. Also so etwas wie eine kleine Liste:
Browser x
Broxser y
und dazu vielleicht auch angegeben, was der Browser nicht macht, also an welchem Beispiel er jeweils scheitert.

War diese Nachfrage nun verständlicher?

katy
(verzweifelt)

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: