WBCE CMS Forum

grindbatzn

Gast

Slider mit unterschiedl. Headerbildern je nach Auflösung

Wegen den Slidern...

Ich habe jetzt folgendes probiert, hab da aber ein kleines Problem:
Die Bilder sind in /slides/
Die gleichnamigen mobilen Bilder sind in /slides/mobile/ <-- das ist auch das eingestellte Bildverzeichnis

Unmittelbar nach dem HTML des Sliders (noch VOR $(window).load(function() { ..)
habe ich eingefügt:

[== JavaScript ==]
var ww = $(window).width();
if (ww > 768) {
var orig = $('#slider[SECTION_ID]').html();
var rep = '/sliders/mobile/'; var re = new RegExp(rep,"g");
var bigpics = orig.replace(re,  "/sliders/");
$('#slider[SECTION_ID]').html(bigpics);
}

Das funktioniert auch: Auf kleinen Screens wird /slides/mobile/ verwendet, auf großen Screens /slides/

Problem dabei: GELADEN werden trotzdem AUCH die mobilen Bilder, auf großen Screens.
(am Smartphone passt alles, die großen Bilder werden NICHT geladen)

Beitrag geändert von grindbatzn (12.01.2017 22:37:20)

colinax

Developer

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Problem dabei: GELADEN werden trotzdem AUCH die mobilen Bilder, auf großen Screens.
(am Smartphone passt alles, die großen Bilder werden NICHT geladen)

Deine Regex bezieht auch Unterordner mit ein.

Lösungen:

• den Unterordner ausschließen

• Die Ordnerstruktur ändern:

  [== JavaScript ==]
  var ww = $(window).width();
  if (ww > 768) {
  var orig = $('#slider[SECTION_ID]').html();
  var rep = '/sliders/mobile/'; var re = new RegExp(rep,"g");
  var bigpics = orig.replace(re,  "/sliders/desktop/");
  $('#slider[SECTION_ID]').html(bigpics);
  }

Welchen Slider verwendest du dafür oder ist das eine Eigenproduktion?

Beitrag geändert von colinax (12.01.2017 23:03:40)

grindbatzn

Gast

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Das sind einfach mehrere <img src="/media/slider/mobile/bildXX.jpg" />
Es gibt keine Unterordner.

Das Problem dürfte eher sein, dass die Tags ja schon im Quellcode stehen, und erst später (obwohl gleich darauf) die Pfade geändert werden. Deswegen gelangen sie noch in die Lade-Liste, obwohl sie nicht mehr gebraucht werden.

Ich probiers morgen mal damit, die <img> Tags  direkt per JS auszugeben.

Beitrag geändert von grindbatzn (12.01.2017 23:55:23)

colinax

Developer

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Es gibt keine Unterordner.

Im mobile Ordner nicht aber der Sliders Ordner hat ja einen Unterordner (den mobile) der auch geladen wird.

Was ich meinte ist:

Deine Struktur (mit Problem):
media
>> Sliders (mit Desktop img)
>> >> mobile (mit Mobile img)

Struktur (ohne Problem):
media
>> Sliders
>> >> desktop (mit Desktop img)
>> >> mobile (mit Mobile img).

Beitrag geändert von colinax (13.01.2017 11:09:16)

florian

Administrator

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

@florian bitte die Posts mit dem slider Problem in einen eigenen Threat, sonst kommt hier ein durcheinander rein.

done

---

Code allein macht nicht glücklich. Jetzt spenden!

grindbatzn

Gast

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Hier ist das mal sichtbar gemacht:
http://wbce.at/tpls/unterseiten/itemz-p … slider.php

die responsiven Slides haben einen roten Punkt. (Hinweis: Nach Fenster verkleinern/vergrößern: Neu laden!) 

Es gibt kein Problem mit dem replace bei den Pfaden - das funktioniert schon.

Das Problem ist: die ursprünglichen Bilder - die VOR dem replace - werden trotzdem geladen. (Aber nicht dargestellt!)

Es ist natürlich unsinnig, wenn ich eine reduzierte Version anbiete, aber es werden trotzdem vorher die vollen Bilder geladen.
Deswegen hab ich es so gemacht, dass die Änderung nur für Desktops gilt, die laden vorher also das /mobile - Bild.

Hier noch eine Bild:

Beitrag geändert von grindbatzn (13.01.2017 11:17:01)

better-work

Mitglied

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

@Chio

Könntest Du bitte die genauen Einstellungen mal posten, leider haben sich unsere Bearbeitungen gerade überschnitten, Sorry :-(

---

Gruß Jörg

grindbatzn

Gast

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Jörg - ist wieder hergestellt.

Was man im Bild oben aber auch gut sieht:
Das Desktop-Bild (1200px breit) hat 50.6k, die Mobile Version (768 px breit und stärker komprimiert) hat 33,2k

Ob die paar k Unterschied wirklich den Aufwand wert sind?

better-work

Mitglied

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Danke Chio...

Zum Thema Ladezeiten: Momentan sind wir ja in Deutschland noch weit davon entfernt, flächendeckende Highspeed Mobilfunknetze zu haben.
Ich weiß ja nicht wie es da bei Euch aussieht...
Die eingesparten KB´s summieren sich ja dann, und das gerade bei einem Slider. Und wenn der ungeduldige User längere Zeit warten muss, bis die Bilder für den Slider geladen sind, ist er unter Umständen schon wieder weg.

Schlecht für den Betreiber, würde ich mal sagen...

   

Beitrag geändert von better-work (13.01.2017 11:53:53)

---

Gruß Jörg

grindbatzn

Gast

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Naja:
Du hast ja nicht nur die reine Datenmenge, es gibt auch einen Haufen Overhead: Latenzzeiten, Unregelmäßigkeiten.

Ich hab hier eine flotte Leitung, aber wenn du dir die Ladezeiten oben ansiehst: Da können kleine Dateien länger brauchen als große.
(Grün: Wartezeit, Blau: Download)
Seltsamerweise tragen zb die ganzen css-Dateien fast mehr auf als die Bilder, obwohl sie sehr klein sind. Und ein 404er kann manchmal alles ewig aufhalten.

Ein wirklicher Vorteil von verschiedenen Slider-Bildern ist, dass du sie verschieden gestalten kannst. Logo-Bigger-Cream oder so ;-)

Beitrag geändert von grindbatzn (13.01.2017 12:02:38)

better-work

Mitglied

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Okay, ja die Ladezeiten der übrigen notwendigen Dateien sind auch nicht zu verachten, das stimmt schon!

Ein wirklicher Vorteil von verschiedenen Slider-Bildern ist, dass du sie verschieden gestalten kannst.

Und genau das ist es was mir daran am Besten gefällt.

Theoretisch könnte man überlegen, das Slider auf kleinen Mobilfunkgeräten gar nicht angezeigt werden.
Sondern eben nur ein statisches Bild. Aber ich glaube das eine derartige Diskussion hier den Rahmen sprengen würde...

---

Gruß Jörg

grindbatzn

Gast

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Sodanna, ich glaub, jetzt hab ichs:

Ich gebe die Bilder nicht direkt aus, sondern schreibe sie in eine Variable:

[== HTML ==]
<div id="slider[SECTION_ID]" class="nivoSlider">
<script>
var imgtags = '';
//Loop:
imgtags += '<img src="[PICTURE]"  alt="" />';
//Ende Loop;
</script>
</div>

<script>
var ww = $(window).width();
if (ww > 768) {
   var rep = '/slider-pics/mobile/'; var re = new RegExp(rep,"g");
   var imgtags = imgtags.replace(re,  "/slider-pics/");
}
$('#slider[SECTION_ID]').html(imgtags);
</script>

Damit werden nur die gewünschten Bilder geladen.
Sichtbar hier:
http://wbce.at/tpls/unterseiten/itemz-p … slider.php

Beitrag geändert von grindbatzn (13.01.2017 12:19:03)

better-work

Mitglied

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Sieht sehr gut aus... Könntest Du das bitte noch auf meiner Seite einfügen?

---

Gruß Jörg

grindbatzn

Gast

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Theoretisch könnte man überlegen, das Slider auf kleinen Mobilfunkgeräten gar nicht angezeigt werden.
Sondern eben nur ein statisches Bild. Aber ich glaube das eine derartige Diskussion hier den Rahmen sprengen würde...

Das wäre gar nicht so schwer:
Man lässt den Loop einfach mal durchlaufen, aber wenn ww < 400 setzt man  imgtags auf ein (1)  anderes Bild.
Den Nivo-Slider müsste man für diesen Fall ebenfalls deaktivieren. (Nicht zwingend, weil der kommt auch mit 1 Bild zurecht, aber wegen der Ladezeit des Sliders)

Problem dabei:
Hoch/Querformat:
Da das ganze nur 1x bei Laden passiert, hast du dann auch im Querformat nur das eine Bild.

@Jörg, ja, mach ich bald.

better-work

Mitglied

Re: Slider mit unterschiedl. Headerbildern je nach Auflösung

Problem dabei:
Hoch/Querformat:
Da das ganze nur 1x bei Laden passiert, hast du dann auch im Querformat nur das eine Bild.

Eben, und das ist ja auch immer so eine Sache, was ist technisch machbar und was letztlich sinnvoll...
Ich denke mal so ist das schon Schick!

---

Gruß Jörg