0

Retina デバイスで @2x 画像を提供するために、サイトで retinaJS を使用しています。

また、jQuery を使用して @2x 画像を網膜なし (大画面のデスクトップ デバイス) にサーバーできるようにしたいと考えています。したがって、画面解像度が 1330px を超える場合、@2x をファイル名の末尾のファイル サフィックス/拡張子の直前に追加できるようにしたいと考えています。

誰かがこれを行う方法を提案できますか?

私の理論は、ターゲット DIV (.bodycontent など) 内のすべての画像を検索し、属性 src から 4 文字を逆算して、@2x を src に追加することでした。

例えば

example.jpg は example@2c.jpg になり、chickens.png は Chickens@2x.png になります。

もちろん、これは png / jpg などの 3 文字の拡張子を持つファイルでのみ機能しますが、ファイルを JPEG と呼ぶことはないので問題ありません...

ターゲット DIV にあるすべての画像に適用するコードが必要です。

何か助けはありますか？

乾杯

この関数は、@2x を適用する必要があることを確認するためにサイズ変更ごとに呼び出されます。 @2x が既に attr src に含まれているかどうかを確認するコードを追加し、既に @2x である場合はこれを実行しないようにするにはどうすればよいですか?

4

1 に答える 1

3

が画像 URL の最後の部分である限り、拡張子の長さに関係なく、これを行う必要があります。.xxx

$('.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 に答える