망막 장치에 특정 해상도 이상의 @ 2x를 추가합니다.

Question

망막 장치에서 @ 2x 이미지를 제공하기 위해 내 사이트에서 망막을 사용합니다.

대형 스크린 데스크탑 장치 인 none retina에서 @ 2x 이미지를 서버에 jQuery로도 사용할 수 있기를 바랍니다. 따라서 화면 해상도가 1330px 이상이면 파일 접미사/확장자 바로 앞에 파일 이름 끝에 @ 2x를 추가 할 수 있기를 원합니다.

누군가 내가이 작업을 수행 할 수있는 방법을 제안 할 수 있습니까?

내 이론은 (예를 들어, .bodycontent)를 대상 DIV 내의 모든 이미지를 찾은 다음 속성 SRC에서 다시 4 개 문자를 계산하고, SRC

예에 @ 배에 추가했다

example.jpg는 example@2c.jpg 및 chickens.png 만 3 leter의 확장자를 가진 파일에서 작동이 과정의

을 chickens@2x.png된다됩니다 - 예를 들어, png/jpg -하지만 예를 들어 JPEG 파일을 호출하지 않기 때문에 괜찮습니다. ...

대상 DIV에서 찾은 모든 이미지에 적용하려면 코드가 필요합니다.

어떤 도움이 필요합니까? @ 배는 벌써하지 ATTR의 SRC에 포함되어 있는지 확인하는 방법 나는 몇 가지 코드를 추가 할 수 있습니다 -이 기능은 모든 호출됩니다

건배

는 @의 2 배를 적용 할 필요가 그것을 확인하기 위해 크기를 조정 이미 @ 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'); 
});