在非视网膜设备上将@ 2x添加到某个分辨率以上的src

Question

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

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

有人可以建议我怎么做吗？

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

e.g。

example.jpg成为example@2c.jpg，chickens.png成为chickens@2x.png

这当然仅适用于具有3个内容扩展名的文件 - 例如png / jpg - 但这没关系，因为我从来没有把文件称为JPEG ......

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

任何帮助？

干杯

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

Answer 1

只要.xxx是图片网址的最后一部分，无论扩展名长度如何，此都应执行此操作：

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