JQuery Slider, Markup und Funktionalität
Malcolm Beck´s
- javascript
مرحبا
ich überarbeite gerade einige der neuen Designs, die SelfHTML bekommen hat. Unter anderem Orange und C-Con. Bemerkungen und Kritik hierzu sind ausdrücklich erwünscht (auch wenn's nichts mit dem Aktuellen Thema zutun hat -- nur nicht vergessen, "Thema/Betreff" entsprechend zu ändern).
Einige der neuen Designs haben einen Slider integriert, was an sich kein Problem ist. Allerdings können die Dinger eine Menge Traffic verursachen, wenn zuviele Bilder eingefügt werden. Daher habe ich mir überlegt, wie man diese Slider so umsetzt, das möglichst wenig Daten an den Client geschickt werden.
Meine Idee war, alle Bilder als einfache Links in einer Liste zu speichern. Also statt einem <img>
-Element für jedes Bild, nur ein einfaches <a>
. Wenn Javascript aktiviert ist, und der Viewport Gross genug ist, werden die <a>-Elemente dann einfach durch <img> ersetzt, um die Bilder anzuzeigen. Idealerweise passieren die ersetzungen auch nur dann, wenn das entsprechende Bild angezeigt werden soll, nicht direkt beim ersten Aufruf der Seite.
Ich habe schon etwas vorbereitet: /img-slider/
Soweit funktioniert es sogar wie gewünscht, nur die "Blättern"-Links am unteren Ende. Diese muss man 2 mal klicken, damit die ersetzung funktioniert. Wenn man die Pfeile rechts und links verwendet, gibt es keine Probleme beim umblättern.
Wo ist der Fehler?
Habt Ihr bessere Vorschläge für die Slider? Letztenendes kommt das, was hierbei rumkommt, in die neuen Templates (zumindest in die, die ich mache).
mfg