0

サイトをモバイルデバイス用に変換しています。コードが次のように構成されている場合、モバイルデバイスのユーザーに2番目の画像セットを配信するために使用するベストプラクティスを知りたいですか？私はすでにメディアクエリを使用して、より小さなデバイスにさまざまなレイアウトを提供しており、モバイルユーザーに2番目に小さな画像のセットを提供したいと考えています。

            <div class="main_view">
                <div class="window">    
                    <div class="image_reel">
                        <a href=""><img src="pics/1.jpg" alt="" /></a>
                        <a href=""><img src="pics/2.jpg" alt="" /></a>
                    </div>
                </div>
                <div class="paging">
                    <a href="#" rel="1">1</a>
                    <a href="#" rel="2">2</a>
                </div>
            </div>

このhtmlは、ここで提案されているような「画像スライダー」効果を作成するJavascriptを参照しています。サイトは非常に多くの画像を配信する必要はありません。cssスプライトと背景画像を使用するようにサイト全体を再設計したくありません。

モバイルデバイスのみのユーザーにもう1セットの画像を配信できる、ブラウザで最も効率的な最良の方法は何ですか？例をいただければ幸いです。

ありがとうございました。

4

3 に答える 3

3

これを行う1つの方法は、すべての画像参照をCSSに配置し、小さい画像を指定する別のCSSルールのセットに対してメディアクエリを使用することです。次のように、すべての画像をCSSに入れることができます。

<a href=""><img id="img1" src="blank.gif" height="400" width="600"></a>

blank.gifは、画像タグの高さ/幅に合わせて拡大縮小された1x1ピクセルの透明なgif（完全に非表示）です。非常に小さく、ブラウザで簡単にキャッシュできます。

次に、通常の画面のCSSで、次のようになります。

#img1 {background: transparent url(pics/1.jpg) no-repeat;}

次に、メディアクエリで指定された小さな画面のCSSで、次のようになります。

#img1 {background: transparent url(pics/1-small.jpg) no-repeat;}

このCSSメカニズムを使用することの重要な利点の1つは、1セットの大きな画像をロードして、事後にそれらを小さな画像に変更する必要がないことです。ブラウザは、HTMLを解析する前に、小さなデバイスのメディアクエリCSSスタイルシートに遭遇するため、小さな画像のみをロードします。javascriptベースのソリューションは、正しいイメージに「パッチを適用」する前に、DOMがロードされるのを待つ必要があります。

于 2012-03-20T07:11:47.410 に答える
1

srcユーザーエージェントがモバイル以外のデバイスである場合に属性をこの値に変更するよりも、モバイル以外のデバイスに使用される画像を指定して、画像タグでカスタム属性を使用できます。あなたはこのようなことをすることができます（擬似コード）：

 $(document).ready(function() {
     if(!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
       $('.mobile').each(function() {
          $(this).attr('src',$(this).attr('high-res-img'));
       });
     }
 });

 <img class="mobile" src="images/your-mobile-image.jpg" high-res-img="images/mobile-image.jpg" alt="" />
于 2012-03-20T07:11:03.920 に答える
0

別のオプションは (JavaScript が有効になっている場合、おそらくスライダーを使用している場合)、js を使用してモバイルをテストし、スライダーの html コードをモバイル対応の html コードに置き換えてから、スライダー スクリプトを実行することです。 / 初期化します。

于 2012-03-20T07:27:27.653 に答える