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

我在我的网站上使用 retinaJS 在视网膜设备上提供 @2x 图像。

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

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

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

e.g.

example.jpg 变为[电子邮件受保护] /cdn-cgi/l/email-protection然后 Chickens.png 变成[电子邮件受保护] /cdn-cgi/l/email-protection

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

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

有什么帮助吗？

Cheers

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

This should这样做，无论延伸长度如何，只要.xxx是图像 URL 的最后部分：

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