Get Desktop-Breite in WordPress

Question

Ich habe eine Website auf WP mit dem Schieberegler auf der Hauptseite erstellt. Jede Folie auf dem Schieberegler hat einen Pfad zum Hintergrundbild, das auf dem Server gespeichert ist. Sagen Sie, für slide1 ist es /images/slide1.jpg.

Ich möchte /images/slide1-wide.jpg für Desktop-Breite> 1400px ersetzen.

CSS ist keine Option, da der Pfad zum Bild dynamisch aus der Datenbank ausgewertet wird.

Ich habe js, die Fensterbreite überprüft, aber es wirkt, nachdem das Bild geladen ist. Das Einzige, was ich erreichen konnte, war ein Originalbild zu zeichnen und es dann neu zu zeichnen. Aus der Sicht des Benutzers sieht es schrecklich aus (schlechtes Bild -> blink -> korrektes Bild).

Ich habe 51degrees Plugin versucht, aber es ist nur in der Lage, mobile Geräte zu erkennen.

Wie kann ich die Fensterbreite auf der Serverseite während der Hauptseitenzeichnung erhalten?

Answer 1

Ich denke, Sie können ein Bild mit diesem Skript auswählen, bevor Ihr Bild angezeigt wird. So werden Ihre Benutzer kein "schlechtes Bild" sehen.

<script> 
$(function(){ 
width = $(window).width(); 
alert(width); 
if (width > 1400) { 
$('#divimg').html("<img src='/images/slide1-wide.jpg'>"); 
} 
else { 
$('#divimg').html("<img src='/images/slide1.jpg'>"); 
} 
}) 
</script> 
<div id="divimg"></div>