在wordpress中获取桌面宽度

Question

我有一个基于WP的网站，主页上有滑块。滑块上的每个幻灯片都有存储在服务器上的背景图像的路径。说，对于slide1，它是/images/slide1.jpg。

我想用/images/slide1-wide.jpg替换桌面宽度＆gt; 1400px。

CSS不是一个选项，因为图像的路径是从数据库动态评估的。

我添加了用于检查窗口宽度的js，但它在加载图像后起作用。所以我唯一能够实现的是绘制原始图像然后重绘它。从用户的角度来看，它看起来很糟糕（图像不好 - ＆gt;闪烁 - ＆gt;正确的图像）。

我尝试过51degrees插件，但它只能检测移动设备。

如何在主页面绘制期间获取服务器端的窗口宽度？

Answer 1

我认为您可以在显示图像之前使用此脚本选择图像。 因此，您的用户不会看到“不良形象”。

<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>