1

私はここでちょっとしたことになりました。各ページに読み込まれた背景を持つサイトを構築しています (これらを 250k 未満に圧縮していますが、各ページに他のすべての画像が読み込まれるため、読み込み時間が非常に長くなります。これ (特に iPhone で) に対処するには、これらの背景を事前にキャッシュまたは事前に読み込むことでしたが、どのタイプのワイヤレス接続でも遅延が長すぎるため、ここでの私の目標は、さまざまなデバイス用に小さいバージョンの背景を読み込むことです.ここの誰かが何らかの解決策を見つけるのを手伝ってくれることを願っています.

現在、各ページの画像を渡す ez bg resize の JavaScript を使用して、if (is_page()) elseif (is_page()) ステートメントを使用して背景をロードしています。

<?php
if( is_page('About') ) { $img = 'images/img1.jpg'; }
elseif( is_page('Home') ) { $img = 'images/img2.jpg'; }
elseif( is_page('Page_Name') ) { $img = 'images/img3.jpg'; }
elseif( is_page('Videos') ) { $img = 'images/img4.jpg'; }
else { $img = 'images/img5.jpg'; }
?>
<script type="text/javascript">
$("body").ezBgResize({
    img     : "<?php echo $img; ?>",
    opacity : 1,
    center  : true
});
</script>

私がやりたいのは、 「このページの場合はこの画像を表示し、iPhone / iPadバージョンの場合はこの画像を表示する」という変数を含めることです

4

1 に答える 1

1

ユーザーエージェントのスニッフィングを行う代わりに、Javascript を介して実際の画面サイズにアクセスできるため、これは必ずクライアント側で行う必要があります。特に、ezBgResize を使用して、とにかくバックグラウンドで Javascript に依存している場合。

デバイスの画面解像度を確認してから、ezBgResize で画像の高解像度または低解像度バージョンを使用できます。ezBgResizeのランダムな背景の例とJavascript メディア クエリに関するこの記事を参考にしてください。

次のようになります。

/* This is an example for just one page, expand to your needs */

// Save the two (or more) different size image file names
var aboutPageBackgrounds = ["image1high.jpg", "image1low.jpg"];

// Check if we are on the about page (assuming an id is set on some element)
if( $("#aboutpage").length ) {
    // Use the high res version by default
    var image = aboutPageBackgrounds[0];

    // Switch to the low res version if the screen is small
    if( screen.width < 600 ) {
        image = aboutPageBackgrounds[1];
    }

    // Call ezBgResize with the resulting image path
    $("body").ezBgResize({
        img     : image,
        opacity : 1,
        center  : true
    });

}
于 2012-07-09T11:00:05.203 に答える