change the_content Bilder für verschiedene Größen (Desktop, Tablet, Handy)?

Dies kann eine komplizierte Frage sein, also werde ich versuchen, es so einfach wie möglich zu erklären. Ich habe drei Größen für Bilder in meinem Beitrag (Miniaturansicht, mittel, groß, 640px, klein) und ich möchte die Größe basierend auf der Browsergröße ändern. Ich dachte über eine Möglichkeit nach, drei Bilder zu laden (klein, mittel, 640px) und benutze css, um Bilder basierend auf der Bildschirmgröße auszublenden und anzuzeigen. Gibt es eine Möglichkeit, dies zu tun? Ich bin offen für andere Vorschläge.

Danke, Gregory S.

Solutions Collecting From Web of "change the_content Bilder für verschiedene Größen (Desktop, Tablet, Handy)?"

Heh … darf ich dich fragen, was ist der Sinn? Weil man denkt, dass es Bandbreite spart und die Ladezeit der Seite verkürzt. Warum also wolltest du immer alle drei laden? Das display: none verhindert NICHT das Laden der Bilder in das DOM. Sie werden immer noch geladen – nur nicht angezeigt. Laden Sie einfach den größten, verwenden Sie CSS, um 100% des Browsers / Containers anzupassen und das Bild wird automatisch vom Browser verkleinert. Auf diese Weise sparen Sie Zeit für kleine und mittlere Bildladezeiten. Und das ist nur für ein Bild. Nehmen wir an, jemand besucht Ihre Blog-Seite (von einem Mobiltelefon aus) mit 20 Posts, die auf der Seite angezeigt werden. Mit Ihrer Methode müssten Sie die Anzahl der Bilder, die Sie laden müssen, von 20 auf 60 verdreifachen (jeweils in klein, mittel und groß) – Wahnsinn!

Der andere Ansatz besteht darin, festzustellen, welche Fenstergröße der Benutzer tatsächlich verwendet (über jQuery) und dann das darauf basierende spezifische Bild zu laden. Ich bin sicher, dass Sie es herausfinden werden, da es nicht so schwierig ist, eine solche function in jQuery zu schreiben. Zum Beispiel unten ist einer meiner Fn, die ich für Bild-Ersatz für Retina-Geräte geschrieben habe. Es funktioniert auf die gleiche Weise – zuerst erkennt es, ob das Gerät eine hohe Pixeldichte hat und wenn es ist, ersetzt es den Namen im Bild src von “normal” bis “Retina” und ändert daher das Bild, das geladen wird:

 jQuery(document).ready(function(){ if (window.devicePixelRatio > 1) { var images = jQuery('img'); images.each(function(i) { var lowres = jQuery(this).attr('src'); var highres = lowres.replace("normal", "retina"); jQuery(this).attr('src', highres); }); } });