5202

ein Blog über technische Fragen zu Blogger

Bilder mit nativem Javascript auf Postbreite vergrößern

von

Ich bin ja nicht so der visuelle Typ. In der Regel benütze ich im Blog keine Bilder. Trotzdem mag ich Blogs mit Photos. Was mich gerade bei Blogger immer wieder irritiert, wie schlecht dort die Bilder präsentiert werden.

Das liegt zum einen am mangelhaftem Backend und miesen Blogger-Editor - zum anderen aber auch an den Bloggern selber, die Photos teilweise chaotisch anordnen. Mal Bilder mit 400px, mal 350px, am besten alles wild gemischt ... die Posts sehen dementsprechend aus.

Ich bin davon überzeugt, dass Bilder, um im Blog zu wirken, eine gewisse Größe brauchen und möglichst klar im Post eingebunden werden sollten. Ich habe dazu schon vor einiger Zeit ein jQuery Script geschrieben, das die Bilder automatisch auf 100% Postbreite bringt.

Dieses Script habe ich nun in nativem [plain] Javascript neu geschrieben. Wie es dazu kam und die Überlegung dahinter, geht es in diesem Post!


jQuery

Meine ersten Schritte in JS waren ehrlich gesagt nicht sehr erfolgreich. Ich fand JS schwierig zu schreiben, noch schwieriger zu debuggen und alles zusammen hat mich eher abgeschreckt.

Dann habe ich jQuery entdeckt und war verliebt :D. jQuery ist sozusagen die natürliche Erweiterung für HTML. Die Lernkurve ist steil. Ohne jetzt behaupten zu wollen, dass ich jQuery letztendlich durchdrungen habe, bilde ich mir ein, dass ich mit jQuery so ziemlich jedes Browserseitige Problem auf einer Web-Site lösen kann.

Dann: Ich kann mit jQuery sicher sein, dass das in allen relevanten Browsern funktioniert und solange es noch IE8 & Co. gibt, ist jQuery das Framework der Wahl.

Probleme

jQuery ist allerdings nicht nur eitel Sonnenschein. Es ist ein Framework, d.h. eine Zwischenschicht zwischen nativem JS und der Anwendung und das macht jQuery langsam.

Ich habe das lange unterschätzt. Ich habe letztens ein paar Test mit wirklich großen Seiten gemacht [30.000 <div> Container] und wenn JS gut geschrieben ist, ist es etwa 30x schneller als jQuery.

Das ist eine Ansage. Selbst wenn es nicht um unrealistische 30.000 nodes geht, ist jQuery langsamer als natives JS, weil vor der Ausführung vom Code zuerst das Framework geladen und ausgeführt werden muss.

Sagen wir es mal so: Gerade auf kleinen Seiten mit wenig Script macht die Ladezeit einen erheblichen Teil der gesamten Ausführungszeit aus. Wenn die Ausführung von einem jQuery-Script 40ms dauert, die Ladezeit aber 200ms, dann beschleunigt natives JS die ganze Geschichte um das 6fache.

Natives JS macht eine Seite also schneller und zwar so, dass ihr das subjektiv spüren könnt. De Seite fühlt sich flüssiger und 'smoother' an. Besucher agieren im Web immer nach Gefühl und eine Seite, die hackelig und lahm ist, wird weniger Besucher haben.

Um eine Seite schneller zu machen, ist der Rauswurf von jQuery so ziemlich das beste, was es gibt.

Was ist mit dem Internet Explorer?

Andererseits müsst ihr euch über eure Ziele im klaren sein. Wenn ihr etwa den Internet Explorer6 unterstützen wollt, braucht ihr eine Bibliothek wie jQuery. Ansonsten codet ihr euch deppert :D.

Wenn ihr allerdings nur die zwei letzten Versionen der relevanten Browser braucht, dann verstehen die natives JS inzwischen alle gleich gut. Bibliotheken, um kryptische Befehle in unterschiedlichen Browsern zu übersetzen, sind nicht mehr nötig.

Ich habe für mich ein paar Standard-Scripts in JS geschrieben, die in allen mir bekannten Browsern arbeiten - etwa um Besucher mit angeschaltetem JS ein alternatives Layout zu geben.

Das Image-100% Script

Aus all den Gründen habe ich begonnen, meine jQuery-Scripts in nativem JS umzuschreiben und der Start ist heute mit dem Image 100% Postbreite Script.

Grund dafür war auch, dass mein jQuery Script bei einigen Anwendern mit anderen Scripten [Bilder-Slider] interagiert hat und ich es eh neu schreiben wollte. Wenn schon, habe ich mir gedacht, warum dann nicht gleich in nativem JS?

Gesagt - getan - ihr findet das fertige und gepackte Script in diesem Gist. Ich habe alle mir bekannten Fehler aus der jQuery Version entfernt ... und beinhaltet wahrscheinlich einen Haufen neuer Fehler!

Was kann das Script?

Das Script tut was es sagt und bringt alle Bilder im Postbereich auf eine Breite von 100%. Wenn ihr also zu den Leuten gehört, die alle möglichen Unterschriften, Signaturen und lustige Bilder unter ihren Post packen und dazu den Blogger-Editor nehmen, dann ist das nichts für euch.

Die einzige Einschränkung ist, dass das nur mit Bilder aus Google Photo, G+ oder Picasa Webalbum funktioniert. Falls ihr eure Bilder also auf directupload & Co. hostet - das übrigens entsetzlich langsam ist - dann ist das ebenfalls nichts.

Wie wendet ihr das Script an?

Ihr kopiert das Script aus dem Gist und packt es irgendwo im Bereich von eurem Layout, vorzugsweise vor dem schließenden Tag.

Das Script wird aber überall funktionieren, egal wo ihr es hinpackt - Vorteil Vanilla Javascript! Über eingebundene oder fehlende jQuery Frameworks müsst ihr euch keine Gedanken machen.

Wie geht's hier weiter?

Ich möchte peu à peu einige Scripts in Javascript neu schreiben, das unglaubliche Layout 'Questa Volta' zumindest als Beta veröffentlichen und ein paar Anmerkungen für den Einsatz von gekauften Fonts in Blogger machen - es bleibt also spannend, bleibt am Ball!

StackEdit

Dieser Post ist übrigens nicht im Blogger Editor entstanden, sondern im Markdown Editor StackEdit geschrieben & veröffentlicht. StackEdit macht bloggen so etwas von entspannt und fokussiert auf den Inhalt, dass ihr euch den Editor wirklich mal anschauen solltet. Wenn ihr das einmal gemacht habt, werdet ihr unter Garantie nie wieder den Blogger-Editor öffnen :D!

geschrieben mit StackEdit.