AJAX: Inhalt abhängig von Bildschirmauflösung »nachladen«

[X_FISH]

Ist nur noch ein Hobby, schon seit Jahren bin ich vom erwerbsmäßigen Websiteerstellen weg. Aber ich habe wieder Lust ein wenig mit den aktuellen Möglichkeiten herumzuspielen.

HTML und PHP kann ich (noch einigermaßen), habe mir für ein kleines, fiktives Projekt folgendes überlegt: AJAX statt CSS mit »display: none«

Anstatt die Auflösung für ein ein- bzw. ausblenden per CSS zu nutzen, möchte ich Inhalte erst nach dem Ermitteln der Auflösung überhaupt erst laden lassen.

Fiktives Praxisbeispiel:

Ich habe zwei <div> nebeneinander. Wenn die Seite auf einem Smartphone geladen wird, soll das zweite <div> aber erst gar nicht geladen werden.
Oder andersherum erklärt: Wenn die Seite auf einem Desktop-Rechner mit großem Bildschrim geladen wird, soll das zweite <div> geladen werden - ansonsten nicht.

Hat mir jemand dazu ein, zwei Links mit Beispielen wo ich mir das anschauen könnte?

Merci vorab,
Martin

 

[scrollt]

wieso solltest man das machen? Entweder baut man die Seite responsive oder rendert abhängig von dem Viewport den Content. Das kann man ja dann mit dynamischen imports nachladen wenn es sein muss, allerdings würde ich sowas in 2021 nicht mehr manuell machen, was für ein Aufwand

Abgesehen davon ist matchMedia() dein Freund um media queries in JS zu benutzen

Working With JavaScript Media Queries | CSS-Tricks

What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this:

css-tricks.com

 

[X_FISH]

[...] Das kann man ja dann mit dynamischen imports nachladen wenn es sein muss, [...]

Darum geht es mir ja gerade. Nehmen wir an im zweiten <div> wären Inhalte, welche auf dem Schmarrnfon sowieso nicht richtig angezeigt werden können -> dann sollen sie erst gar nicht geladen werden (geladenes Volumen vermindern).

Oder grüble ich einfach über Probleme, welche inzwischen nicht mehr bedacht werden da ja so gut wie jeder ohnehin eine riesige Datenflat bei seinen mobilen Daten hat? *grübel*

Abgesehen davon ist matchMedia() dein Freund um media queries in JS zu benutzen

Schaue ich mir an, merci!

Grüße, Martin

 

[scrollt]

Also, ich bin React Entwickler und darum etwas dem klassischen Webseitenbau entrückt (zum Glück), aber wenn du deinen Frontend-Code irgendwie zusammenbaust, kannst du mit dynamischen Imports bauen.

Ein Beispiel wäre hier die Verwendung von Webpack, das dynamische imports unterstützt.

Code Splitting | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

Sprich, du könntest deine Codebasis splitten, je nach Viewport. ABER, ich glaube nicht, dass das lohnt. Ich mache das wenn hinter dem dynamischen Import ein Monster-Library hängt das 100erte KB groß ist. Für ein bisschen HTML ist das völlig unnötig.

Ich denke für dich wäre es entscheidend, nur das zu rendern was auch zu sehen sein soll. Je nach framework gibt es da verschiedene Möglichkeiten. Oder baust du ganz normales HTML und machst danach mit jQuery oder so rum?

 

[X_FISH]

Kanonen und Spatzen also... Hm... Ich lese mich ein. Merci für die Links.

Grüße, Martin

 

[scrollt]

Man braucht das nicht übertreiben, genau

Was natürlich sehr viel Sinn macht ist darauf zu achten, etwa Bilder und Medien auch nur dann zu laden wenn sie sichtbar sind. Da gibt es auch viele Möglichkeiten das zu regeln. Falls du da Fragen hast immer raus damit, dann ist in diesem eingestaubten Teil des Forums wenigstens mal was los