nicht angemeldet
Image-<object> Bildwechsel über setAttributzeNode() des data-Attribut,
<div>-Tag Bildwechsel mit css-Attribut: background mit repeat,
<img>-Element Bildwechsel
bei <div>-element wo ich das 1pixelGrafik als background-Image repitiert habe ist das resultat unterschiedlich,
Unterschiedlich wozu? Stottert die Animation in sich oder verhält sie sich bei jedem Seitenaufruf anders? Oder in jedem Browser? Oder zu
bei <object> und <img> wo ich die Grafik einfach gestreckt habe über den anzegebereich.
? In letzterem Falle wäre deine Frage teilweise schon beantwortet.
Frage: Welches der drei methoden kommt der JS-Parser besser zurecht
Ich mein bei CSS-Deklaration Background muss JS- oder HTML-Parser ja diesen einen Pixel für die gaze anzeigefläche wiederholen
Die Kachelei übernimmt nicht der JS-Parser und schon gar nicht der HTML-Parser, sondern die Komponente im Browser, die für die Grafikdarstellung zuständig ist.
Das jedoch nur nebenbei, denn allgemein lässt sich deine Frage nicht beantworten. Die Aufgaben lassen sich unterschiedlich händeln, schon rein programmatisch und es kommt noch die Möglichkeit hinzu, die Arbeit der Grafikhardware zu überlassen. Entsprechend unterschiedliche Ergebnisse können sich von Browser zu Browser einstellen.
Es ist auch das Seitenumfeld zu beachten (HTML-Elemente beeinflussen sich gegenseitig) und dann hast du obendrein noch den Sonderfall einer 1-Pixel-Grafik, die nicht gestreckt oder wiederholt werden muss – es reicht, kurzerhand die ganze Fläche entsprechend einzufärben. Auch hier kann es wieder zu unterschiedlichen Handlungsweisen zwischen den Browsers kommen.
In dieser Richtung ist das also viel Stochern im Nebel, viel Spekulation und somit vergebene Liebesmüh'. Im dümmsten Falle verschlimmbesserst du die Situation nur. Ich würde mich daher von der Logik leiten lassen, also der Frage, ob es ein Bild sein soll (<img>) oder nur dekoratives Beiwerk (background).
Falls du nach einer Optimierung suchst und es bei der 1-Pixel-Grafik bleiben soll, rate ich dir, die Grafik in die Tonne zu treten und stattdessen einfach die gewünschte Farbe per background-color zu benennen. Damit fallen sämtliche Arbeiten zum Laden und Dekodieren der Grafik sowie zum Anpassen (Streckung bzw. Wiederholung) weg. Freundlicherweise lässt sich background-color auch noch CSS-seitig animieren, du bräuchtest also gar kein Javascript und hättest die Gewissheit, dass der Browser tut, was er kann, um eine möglichst gute Animation zu erreichen.
Matthias Apsel