Responsive Design – Medienabfragen – So laden Sie bestimmte Bilder nicht
https://stackoverflow.com/questions/7385433
-
29-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ok, also habe ich ein responsives Layout entworfen, das für sehr kleine Bildschirmgrößen keine Bilder anzeigt, indem ich Medienabfragen und verwendet habe display: none;.
So weit, ist es gut.Diese Bilder werden jedoch weiterhin auf diese Geräte heruntergeladen, was zu einer Erhöhung der Bandbreite führt.
Wie kann verhindert werden, dass diese Bilder auf die angegebenen Geräte heruntergeladen werden?
Jede Antwort wäre sehr dankbar!
Lösung
<noscript>-Tags einzuwickeln, und ziehen Sie das Bild später mit JavaScript heraus. Cookies funktionieren nicht auf der ersten Seite (HTMLPreloadscanner), noch mit cdns.Browser-Schnüffeln ist nutzlos, wenn Ihre Bilder nicht immer 100% des Ansichtsfensters sind.
slimmage.js implementiert kontextfreundliche ansprechende Bilder in 3kB Vanille JS .
Das Markup ist auch ziemlich einfach: generasacodicetagpre.
Natürlich können Sie einen serverseitigen Helfer machen, um das sogar abstrakt zu abstürzen.
Andere Tipps
Zwei Optionen fallen mir ein:
- Erkennen Sie kleine Geräte auf dem Server mithilfe von Browser-Sniffing und senden Sie ihnen anderen HTML-Code, der nicht auf die Bilder verweist.
- Zeigen Sie die Bilder über CSS statt HTML an (in
styleAttribute, wenn Sie möchten), mit einem der beidenbackground-imageoder:before/:afterUndcontent(wird von IE 6 oder 7 nicht unterstützt) und binden Sie diesen CSS-Code in Medienabfragen ein, sodass er nur von Geräten mit größeren Bildschirmen angezeigt wird.
Wenn Ihnen eine Javascript-Abhängigkeit nichts ausmacht, können Sie window.innerWidth und überprüfenFügen Sie Bild-Tags für ausreichend große Bildschirme ein.
Bilder werden nur angefordert, wenn Javascript aktiviert ist und das Fenster groß genug ist.
Wenn Sie keine Probleme mit der Verwendung von zusätzlichem JavaScript haben, können Sie DIESES versuchen.Ich bin beim Suchen und Lernen über Medienabfragen darauf gestoßen.
