0

我在我的网站上使用retinaJS 在视网膜设备上提供@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 则不执行此操作？

4

1 回答 1

3

这应该做到这一点，无论扩展长度如何，只要.xxx是图像 URL 的最后部分：

$('.bodycontent img').prop('src', function(_, src) {
    src = src.replace(/@2x\./, '.');         // strip if it's already there
    return src.replace(/(\.\w+$)/, '@2x$1');
});
于 2014-06-19T08:47:34.053 回答