javascript - 有条件地加载图像以进行响应式设计

Question

我正在为现有网站改造自适应布局。基本上在 500px 时，网站会更改为 100% 宽度的移动式布局。通常我会使用 ems，但正如我所说，我正在 retrofit 。

我知道如何有条件地加载js和css，但是html和图片呢？

在网站的主页上有一个大图像填满了屏幕，我的小屏幕布局不需要它，所以如果浏览器宽度超过 500 像素，我希望加载它。问题是我无法存储 <img src="..." />等在 js 中，因为它是用 php 动态加载的。客户端通过wordpress admin控制图片。

如有任何想法，我们将不胜感激。谢谢

Answer 1

如果可以的话，我建议使用 div 并将背景图像属性设置为您需要的图像。您可以使用媒体查询来定位屏幕尺寸。基本上...

HTML
<div id="splash-image"></div>

CSS
#splash-image {
    background-image: url("small-image.png");
}

@media only screen and (min-width: 500px) {
    #splash-image {
        background-image: url("big-image.png");
    }
}