JS: onload/onerror/onreadystatechange cross browser

KasselJulian · 01.09.2014

Hi,

meine Frage ist simpel und kurz: Wie muss meine Callback-Function für

Das fehlerhafte Laden einer Ressource
Das erfolgreiche Laden einer Ressource

initialisiert werden, damit ich damit alle Browser inkl. IE8 erreiche?

Bsp:

Code:

element.onerror = someFunc();
element.onload = someFunc();

Hierbei bin ich mir nicht sicher ob/wie viele Browser ich damit erreiche.

mindraper · 07.10.2014

hi,

sofern "someFunc()" keine function als rückgabewert hat, erreicht dein code keinen einzigen browser. :cool:

im ernst:
die von dir gezeigte art einen eventlistener zu registrieren gehört zu DOM Level 1 und sollte damit selbst im IE 6 ohne probleme lauffähig sein.

nun zur frage:
im allgemeinen kann mit "onload" eben genau dieses event abgefragt werden: ist diese/s ressource/element/dokument komplett geladen. analog dazu verhält sich "onerror", sofern beim laden ein fehler aufgetreten ist.

PHP:

// beispiel: bild laden
var img = document.createElement('img');
img.onload = function () {
    // "this" zeigt auf das image
    // wenn bildhöhe + bildbreite gleich null, dann ist das bild defekt
    // und onerror() wird aufgerufen
    if (this.naturalWidth != null) {
        if (this.naturalWidth + this.naturalHeight === 0) {
            this.onerror();
            return;
        }
    }

    if (this.width + this.height === 0) {
        this.onerror();
        return;
    }

    // ... dein code
}

img.onerror = function () {
    // ... fehler beim laden behandeln
}

// alt-attribut muss vorhanden sein, sonst invalides HTML
img.alt = '';

// startet das laden des bildes
img.src = 'URL/ZUM/BILD/DAS/GELADEN/WERDEN/SOLL.jpg';

etwas granularer arbeitet "onreadystatechange". während "onload" nur dann ein event feuert, wenn die ressource komplett geladen wurde, setzt "onreadystatechange" auch zwischenergebnisse ab. ein gutes beispiel für das zusammenspiel von "onreadystatechange" und "onload" ist die implementierung von jQuery(document).ready(function () ... ). dort werden beide events genutzt, um älteren versionen des IE das "DOMContentLoaded" event beizubringen (in form eines fallbacks).

im prinzip wirst du (falls du ein framework nutzt) seltenst bis nie mit "onreadystatechange" in berührung kommen, da "onreadystatechange" hauptsächlich für XHR/AJAX im IE 6/7 interessant ist, was eigentlich jedes framework abdeckt. neuere elemente wie beispielsweise das HTMLVideo element besitzen und emittieren zwar "onreadystatechange", gleichzeitig besitzen sie aber auch syntaktisch sinnvollere eventlistener wie "oncanplay", "oncanplaythrough", etc.