1

jQueryMobileで実行されているモバイルサイトがあります。非網膜（高ピクセル密度のないデバイス）デバイスの標準画像が欲しいのですが、それらの画像を、高ピクセル密度のデバイスで表示したときに元のサイズの2倍のRetina（高ピクセル密度）画像に置き換えたいです。私はここでこの記事を見つけました：http：//flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/

実装用のjQueryは、を含む画像を検索し、標準の画像をファイル名に追加されclass="replace-2x"た同じパスの画像に置き換えます。@2xしたがって、Retinaデバイスでlogo.pngはに置き換えられます。logo@2x.png私のjQueryは次のようになります。

function highdpi_init() {
    if(jQuery('.replace-2x').css('font-size') == "1px") {
        var els = jQuery(".replace-2x").get();
        for(var i = 0; i < els.length; i++) {
            var src = els[i].src
            src = src.replace(".png", "@2x.png");
            els[i].src = src;
        }
    }
}
jQuery(document).ready(function() {
    highdpi_init();
});

ただし、ページが読み込まれると、この関数は呼び出されないか、機能しません（どちらか一方）ので、$(".page").live('pageinit', function() {代わりに何かが必要かどうか、またはページが読み込まれたときに関数が起動または「機能」するようにするために何が必要かわかりません。ヘルプ？？:)

4

1 に答える 1

3

JQuery mobileでは、関数が1回だけ呼び出されるpageinitため、を使用する必要があります。ready1つおきのページはAjaxを介して読み込まれ、readyイベントはトリガーされません。詳細については、 JQueryモバイルイベントを参照してください。

function highdpi_init() {
    $(".replace-2x").each(function () {
        if ($(this).css("font-size") == "1px") {           
            var src = $(this).attr("src");
            $(this).attr("src", src.replace(/(@2x)*.png/i, "@2x.png").replace(/(@2x)*.jpg/i, "@2x.jpg"));
            $(this).removeClass('replace-2x')
        }
});

$(".ui-page").live('pageinit',function(event){
    highdpi_init();
});
于 2012-04-05T13:23:34.123 に答える