在无视网膜设备上以高于特定分辨率的方式将@ 2x添加到src [英] adding @2x to src above certain resolution on none retina devices

问题描述

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

I use retinaJS on my site to serve @2x images on retina devices.

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

I would also like to be able to use jQuery to server @2x images on none retina - large screen desktop devices. So if the screen resolution is above 1330px then I want to be able to add @2x to the end of the filename directly before the file suffix/extension.

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

Can someone suggest how I might do this?

我的理论是在目标DIV中查找所有图像(例如，bodycontent)，然后从src属性中算出4个字符，并在src中添加@ 2x

My theory was to find all images within a target DIV (e.g. .bodycontent) and then count back 4 characters from the attribute src and add in @2x to the src

例如

example.jpg变为example @ 2c.jpg，chickens.png变为[e-mail]

example.jpg becomes [e-mail] and chickens.png becomes [e-mail]

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

This of course only works on files with 3 leter extensions - e.g. png / jpg - but that is OK as I never call files JPEG for example...

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

I need the code to apply to ALL images found in the target DIV.

有帮助吗?

欢呼

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

This function is called on every resize to check it the @2x needs to be applied - how can I add some code to check to see if @2x is already included in the attr src and then not perform this if it is already @2x?

推荐答案

只要扩展名.xxx是图像URL的最后部分，此应该都可以做到这一点:

This should do it, regardless of the extension length, so long as the .xxx is the final part of the image URL:

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

这篇关于在无视网膜设备上以高于特定分辨率的方式将@ 2x添加到src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！