在非视网膜设备上将@2x 添加到高于特定分辨率的 src

Question

我在我的网站上使用 RetinaJS 在 Retina 设备上提供 @2x 图像。

我还希望能够使用 jQuery 在非视网膜 - 大屏幕桌面设备上提供 @2x 图像。因此，如果屏幕分辨率高于 1330 像素，那么我希望能够在文件后缀/扩展名之前直接将 @2x 添加到文件名的末尾。

有人可以建议我如何做到这一点吗？

我的理论是找到目标 DIV 中的所有图像（例如 .bodycontent），然后从属性 src 倒数 4 个字符并将@2x 添加到 src

例如

example.jpg 变成 example@2c.jpg 并且 chickens.png 变成 chickens@2x.png

这当然只适用于具有 3 个字母扩展名的文件 - 例如png / jpg - 但这没关系，因为我从不将文件称为 JPEG...

我需要将代码应用于目标 DIV 中找到的所有图像。

有什么帮助吗？

干杯

每次调整大小时都会调用此函数以检查是否需要应用 @2x - 如何添加一些代码来检查 @2x 是否已包含在 attr src 中，如果已包含则不执行此操作@2x？

Answer 1

这个应该这样做，不管扩展长度如何，只要.xxx是图片URL的最后部分：

$('.bodycontent img').prop('src', function(_, src) {
    src = src.replace(/@2x\./, '.');         // strip if it's already there
    return src.replace(/(\.\w+$)/, '@2x$1');
});