1

class="replace-2x"ユーザーがRetinaディスプレイを搭載したモバイルデバイスを使用している場合、jQuery Mobileサイトの標準画像をRetina品質の画像に置き換えるJavascript置換機能を実行しています。たとえば、Retina デバイスでは、logo.pngは に置き換えられlogo@2x.pngます。JS 関数は次のとおりです。

function highdpi_init() {
    $(".replace-2x").each(function () {
        var src = $(this).attr("src");
        $(this).attr("src", src.replace(".png", "@2x.png").replace(".jpg", "@2x.jpg"));

    });
}

$(".page").live('pageinit',function(event){
    highdpi_init();
});

現在、置換機能が複数回実行されているという問題が発生しています。したがって、たとえば、ページが読み込まれると置き換えlogo.pngられlogo@2x.pngますが、ページが読み込まれ続けると、画像タグが次のようになるように、img src で何度も置き換え.pngられ続けます。@2x.png

<img src="mobile/images/logo@2x@2x@2x@2x@2x@2x@2x@2x@2x@2x@2x.png" class="replace-2x" alt="logo" width="200">

これが単一の img 要素で複数回置き換えられないようにするにはどうすればよいですか? 同じページに複数の画像があるので、関数はすべての画像に適用する必要がありますが、それぞれ 1 回だけです。

4

3 に答える 3

3

問題は、「pageinit」イベントが複数回呼び出されていることです。MДΓΓ БДLL のアイデア (画像が動的に追加された場合は機能しません) に従うか、ハンドラーをよりスマートにして、既に置き換えられている場合に src を置き換えないようにすることができます。

function highdpi_init() {
    $(".replace-2x").each(function () {
        var $this = $(this);
        var src = $this.attr("src");
        $this.attr("src", src.replace(".png", "@2x.png").replace(".jpg", "@2x.jpg"));
        // Remove the class so it doesn't replace it again
        $this.removeClass('replace-2x')

    });
}

これには JS は必要ありません。CSS だけで行うことができます。

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="/css/highdpi.css"/>

画像を次のように見せることができます

<img src="transparent.gif" class="logo-a" alt="logo" width="200" />

そして、highdpi.cssあなたができること

img.logo-a {
   background-image: url('file@2x.png') 
}

そして、lowdpi.css

img.logo-a {
   background-image: url('file.png') 
}
于 2012-04-05T15:59:55.553 に答える
0

.one() の使用は単なるバインディングであるため、機能するはずです。Jquery Mobile を使用している場合は、推奨される方法で問題ありません。これは、サーバーから html を返さない限りです。その場合、置換する前に src がまだ @2x.png を持っていないことを確認するために、条件を追加することをお勧めします。

于 2012-04-05T16:03:07.573 に答える
0

jQuery Mobile の公式ドキュメントには、pageinit に関するドキュメントが残念ながらほとんどありません。というわけでここで推測してみます。特定の DOM 要素の読み込みが完了したときにイベントを発生させるために使用されているように見えます。これはpageinit、最初のページの読み込み時に読み込まれていない可能性があるためです (必要になるまで延期されます)。そうは言っても、問題のDOM要素に画像を追加/変更すると、pageinitが再び起動する可能性があります。更新された各画像に「ねえ、私はすでに 2x に更新されています」というタグを付けていただけますか? 次のようなもの

$.data(targetimg, 'retinafied', true);

そして、srcを置き換える前にその値を確認しますか?

于 2012-04-05T16:06:58.187 に答える