使用jQuery进行响应性图像替换，无需浏览器嗅探

我一直在研究快速响应的图像替换技术，它们都有优缺点。但有一点似乎很常见，那就是它们都使用浏览器嗅探来选择性地设置适当的图像大小

目前可以创建一个媒体查询语句，该语句可以针对页面上的“已知”给定图像（比如wordpress的“特色图像”），以替换每个设备宽度断点处的低分辨率图像

例如，如果我们为给定页面的特征图像设置了此标记“

问题是，我希望jQuery能帮上忙，当您事先不知道映像名时，您需要使用dom来找到它，然后可能使用regex来指定替换映像

---

例如，我的示例中的图像是“myimage-300x300.jpg”，但它可以是扩展名为-WidthxHeight.jpg的任何文件名。

您不能只执行以下操作吗？：

HTML

<div class="image"></div>

---

您不以图像为目标，而是以容器为目标。图像是通过css media querySure作为目标的，但是如果image1变成image3，问题是如果您不知道名称，只知道DOM中的位置，如何为任何图像创建替换。您将无法预先知道文件名。您必须嗅探该wi以某种方式调用jQuery并将其传递给媒体查询。

@media only screen and (max-device-width:480px)
{
    figure.figureFeatured img{content:url(myimage-50x50.png)}";
}

<div class="image"></div>

.image {
     background: url("image1") no-repeat scroll 1px 1px #FFFFFF;
}

@media only screen and (max-device-width:480px)
{
.image {
     background: url("image2") no-repeat scroll 1px 1px #FFFFFF;
}
}