Laden eines Sliders o.ä. auf Mobilegeräten verhindern (ohne display:hidden)?

[voodoopupp]

Hallo,

gibt es eigentlich eine saubere Lösung, damit unterhalb bestimmter Viewports (z.B. 700px) ein Slider oder ein anderes Element geladen wird?

Klar, man könnte es mit display:hidden ausblenden, aber damit wird ja im Hintergrund dennoch alles geladen und unnötig Performance & Datenvolumen verschenkt.

Nun liegt also bzgl. des Sliders folgendes vor:

• {box_slider} in der index.html
• box_slider.html im Ordner "boxes"
• in der "source\boxes.php" ein Eintrag:
  require_once(DIR_WS_BOXES . 'slider.php');
• in der javascript/general.js.php:
  <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.js" type="text/javascript"></script>
  UND
  der Aufruf einer Funktion
  $(function() {
    $('#slider').nivoSlider({
  ...
  

Wie kann man es also nun realisieren, dass am besten
a) nichts von alledem geladen wird, wenn der Viewport größer 700px ist oder
b) wenn a) nicht möglich ist, so wenig wie möglich im Hintergrund geladen wird.

Freue mich auf eure Anregungen.

Grüße
Dominik



Linkback: https://www.modified-shop.org/forum/index.php?topic=31322.0

[Matt]

Du suchst Conditional loading. Das hier ist ein guter Einstiegspunkt:
http://24ways.org/2011/conditional-loading-for-responsive-designs/

[voodoopupp]

Merci, Matt


Muss ich mal angehen und mich informieren...

Könnte man auch erstmal etwas mit dem schlechteren display:hidden umsetzen?

Und dann erst in einem zweiten Step die Funktion um das conditional loading "einfach" erweitern/verbessern?

Denke, dass nämlich die Umsetzung nicht allzu einfach sein wird

Grüße
Dominik

[Godzilla]

gibt es eigentlich eine saubere Lösung, damit unterhalb bestimmter Viewports (z.B. 700px) ein Slider oder ein anderes Element geladen wird?

Eine saubere Lösung wäre eine "mobile first"-Lösung, die dafür sorgt, dass erst ab einer bestimmten Größe etwas dazugeladen wird.

Dazu müsste dann die Bildschirm- / Gerätegröße ermittelt werden und danach entsprechend etwas nachgeladen werden.

Für Jquery habe ich das gefunden:
http://hasinhayder.github.io/BreakPoint/

Allerdings würde ich wenn möglich dann aber auch direkt auf Jquery (bei kleinen Bildschirmen) verzichten.

Wenn es nur um einen Slider geht, dann würde ich einen wählen, der weitere Bilder nachlädt und den so einstellen, dass der bei kleinen Bildschirm- / Gerätegrößen keine weiteren Bilder nachlädt.

Es kommt halt immer darauf an, was man konkret umsetzen will.

[voodoopupp]

Hallo Godzilla,

Das ist eigentlich genau der Hintergrund meiner Frage: wie baue ich das Template "mobile-first" unter Berücksichtigung solcher Dinge wie z.b. einem Jquery Slider usw...

[hpzeller]

[...] wie baue ich das Template "mobile-first" unter Berücksichtigung solcher Dinge wie z.b. einem Jquery Slider usw...

Ein Tipp, schau dir mal das Framework Bootstrap3 hier an.

Gruss
Hanspeter

[voodoopupp]

Servus Hanspeter,

Danke für die Info. Meinst du, dass ich mir dort ein ganz bestimmtes Beispiel anschauen soll, um diese Funktion zu sehen oder allgemein ein Hinweis auf Bootstrap?

Denn wenn das so ist: ich möchte KEIN Framework nutzen...

[hpzeller]

Hallo voodoopupp

[...]
Denn wenn das so ist: ich möchte KEIN Framework nutzen...

Das habe ich nicht gewusst, aber wenn Du ein responsive template ohne Framework bauen möchtest, dann glaube ich das Du eine gewaltige Aufgabe vor dir hast.

Gruss
Hanspeter

[Godzilla]

Hallo Godzilla,

Das ist eigentlich genau der Hintergrund meiner Frage: wie baue ich das Template "mobile-first" unter Berücksichtigung solcher Dinge wie z.b. einem Jquery Slider usw...

Hallo voodoopupp,

Schritt 1: Die Bildschirmbreite mit Javascript ermitteln
http://fiddle.jshell.net/L6uPV/show/4

Schritt 2: Content erst ab einer bestimmten Breite nachladen

Code: PHP  [Auswählen]

var width = x;

                if (width >= 600) {
                   bla bla;
                } else if (width >= 1024) {
                    bla bla;
                }
 

Schritt 3: Jquery-Ersatz finden

Jquery:

Code: PHP  [Auswählen]

$("#container").append("<p>more content</p>");

Reines Javascript:

document.getElementById("container").innerHTML += "<p>more content</p>";

Quelle: http://www.sitepoint.com/do-you-really-need-jquery/, http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/, http://www.leebrimelow.com/native-methods-jquery/