Erkennen ob JavaScript deaktiviert ist und anderen Inhalt anzeigen

Ares · #1 (**permalink**) 31.01.2011, 11:30

Hallo!

Ich verwende auf meiner Webseite ein JavaScript um mehrere Bilder nacheinander in einem "Slider" anzuzeigen.

Im HTML-Text sind die Bilder einfach in einer Liste aufgezählt, die korrekt Anzeige übernimmt dann das JavaScript:

HTML-Code:

 <div id="slider">
  <ul>
    <li><img src="images/01.jpg" alt="" /></li>
    <li><img src="images/02.jpg" alt="" /></li>
    <li><img src="images/03.jpg" alt="" /></li>
    <li><img src="images/04.jpg" alt="" /></li>
    <li><img src="images/05.jpg" alt="" /></li>
   </ul>
 </div>

Das Funktioniert alles prima. Aber wenn JavaScript nicht aktiviert ist, werden die Bilder natürlich nicht nacheinander angezeigt sondern erscheine alle in der Liste. Das sprengt dann leider mein Design.

Für den Fall, dass JavaScript nicht aktiv ist, wäre es kein Problem nur ein Bild anzuzeigen. Aber wie erkenne ich diesen Fall?

Ich brauche quasi etwas in der Form:

Code:

if (JavaScript Aktiv) then
   <ul>
      <li>"Liste mit allen Bilder"</li>
      <li>"mit"</li>
      <li>"Bilder"</li>
   <ul>
else
   <ul>
      <li>"nur ein Bild"</li>
   <ul>
endif

Mit dem noscript-Tag kann ich den ELSE-Teil zwar realisieren, aber nicht den IF-Teil.

Wie löst man so etwas richtig?

Besten Dank
Ares

inta · #2 (**permalink**) 31.01.2011, 11:50

Da gibt es verschiedene Möglichkeiten.

Du kannst alle bis auf das erste Bild per CSS ausblenden, bei Darstellung ohne CSS wären dann wieder alle Bilder zu sehen. Wieder sichtbar machst du die versteckten Bilder natürlich mit Javascript. Besser als ausblenden wäre hier ein Galerie die nur mit CSS funktioniert und bei aktiviertem Javascript dann durch deine Javascript-Galerie ersetzt bzw. erweitert wird.

Du kannst nur ein Bild angeben und alle weiteren per Ajax/Javascript nachladen, ohne Javascript gibt es dann immer nur ein Bild zu sehen. Das kostet allerdings einen weiteren Request und eine längere Wartezeit bis die Galerie dargestellt wird.

Das nur mal in aller Kürze als Ideen.

David · #3 (**permalink**) 31.01.2011, 13:20

Zitat:

Zitat von inta

Das kostet allerdings einen weiteren Request und eine längere Wartezeit bis die Galerie dargestellt wird.

Die Requests hast Du doch sowieso, wenn Du die Bilder komplett in den Quelltext schreibst.

Ich handhabe es so, dass ich zwei Bilder im Quelltext habe, die ich per JavaScript übereinander lege. Das obere blendet aus, die Stapelung wird getausch und dann läd das hintere bild neu. Das hat den Vorteil, dass bei deaktiviertem JS nur zwei Bilder geladen werden, anstatt alle. (Vor allem für Handhelds sinnvoll).

Wenn Du wirklich nur ein Bild anzeigen willst, falls JS deaktiviert ist, dann kannst Du das zweite (und jedes weitere) Bildelement dynamisch mit JS generieren.

inta · #4 (**permalink**) 31.01.2011, 14:08

Zitat:

Zitat von David

Die Requests hast Du doch sowieso, wenn Du die Bilder komplett in den Quelltext schreibst.

Nein, ohne Ajax hast du einen Request weniger.

Ohne Ajax:
1 Request für die Seite + 5 Requests für die Bilder = 6 Requests

Mit Ajax:
1 Request für die Seite + 1 Request für das erste Bild + 1 asynchroner Request + 4 Requests für die restlichen Bilder = 7 Requests

Ein asynchroner Request lohnt sich meiner Meinung nach nur, wenn er nicht immer ausgeführt wird, also zum Beispiel nur auf Anfrage durch den Nutzer.

David · #5 (**permalink**) 01.02.2011, 16:20

Nur zum Verständnis, wonach fragt denn der asynchrone Request, wenn nicht nach einem Bild?

inta · #6 (**permalink**) 01.02.2011, 22:57

In der Regel bekommt man einen JSON-String zurück, in welchem sich die nötigen Informationen zu den Bildern befinden. Es kann auch fertiges HTML sein.

Warum sollte ein asynchroner Request nach einem Bild fragen? Um das tun zu können, müsste die URL ja schon bekannt sein und dann könnte man sie auch gleich in ein img-Element einsetzen und das Bild würde automatisch geladen.

David · #7 (**permalink**) 02.02.2011, 11:25

Offenbar mangelt es mir hier an den Definitionen der Fachbegriffe.

Oder ich denke zu unkompliziert. ^^

Du meinst, ein Bild ist im Quelltext als HTML untergebracht und das Script fragt erst nach den URLs der anderen Bildern beim Server nach ala "GET /return-galery-info?id=1" und bekommt ein JSON-String zurück in dem die Meta-infos stehen?
Das wäre natürlich wirklich ein Request zu viel.

Ich rufe meine Slideshow in etwa so auf:

Code:

slider = new Slideshow(el containerElement, array imgList, array args);

In imgList stehen alle URLs sowie width/height werte bereits drin. (Wird Serverseitig im Backend festgelegt und dynamisch zusammengesetzt) Damit erspare ich weitere Requests auf Bilder, wenn z.B. kein JS aktiviert ist.

inta · #8 (**permalink**) 02.02.2011, 12:45

Zitat:

Zitat von David

Du meinst, ein Bild ist im Quelltext als HTML untergebracht und das Script fragt erst nach den URLs der anderen Bildern beim Server nach ala "GET /return-galery-info?id=1" und bekommt ein JSON-String zurück in dem die Meta-infos stehen?

Genau.

Zitat:

Zitat von David

Ich rufe meine Slideshow in etwa so auf:

Code:

slider = new Slideshow(el containerElement, array imgList, array args);

In imgList stehen alle URLs sowie width/height werte bereits drin. (Wird Serverseitig im Backend festgelegt und dynamisch zusammengesetzt) Damit erspare ich weitere Requests auf Bilder, wenn z.B. kein JS aktiviert ist.

So ginge es auch ja, aber dann kann man die Grafiken auch gleich ins HTML stecken (sofern man alle anzeigt).

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Klasse funktioniert nicht (.pdf)	Guitarrero	CSS	5	18.08.2010 18:55
Problem mit position:relative;	McCoRmIcK	CSS	0	08.04.2007 16:23
Problem mit verschachtelten Div's	Sombreo	CSS	9	22.07.2004 21:49
Inhalt immer im Container #Inhalt anzeigen.	schnippi	CSS	7	07.04.2004 17:02
Breite von DIVs	Daniel	CSS	8	23.06.2003 18:01