5

デスクトップ バージョンで 10 ～ 20 個の小さな画像を含むサイドバーが表示される Web サイトがあります。これまで、モバイル デバイスでは、このサイドバーは単純に で隠されていましたdisplay: none。これは、とにかくすべての画像が読み込まれるため、パフォーマンスが最も低いソリューションです。

モバイル デバイスでサイドバーを完全に無効にする (別の AJAX 要求を使用せずに) 最善の方法を考えています。

私が考えることができる最善の解決策は次のとおりです。

  • サイドバーの HTML コードを JavaScript 変数に書き込む
  • JavaScript でメディア クエリをチェックして、デバイスの幅をテストします (例: Modernizr.mqor so を使用) 。
  • このテストでモバイル デバイス以外のデバイスが生成された場合はinnerHTML、変数の内容jQuery.appendをDOM に書き込みます。jQuery.prepend

RWD のパフォーマンスは非常に複雑なトピックになる場合があり、最もパフォーマンスの高いソリューションが明確でないことが多いことを私は知っています。では、上記の解決策よりも優れた解決策を考えられる人はいますか?

4

2 に答える 2

1

画像をモバイルに読み込ませたくない場合は、画像を<img>タグとして配置する代わりに、divを目的の幅と高さに設定し、画像を背景画像として取り込むことができます。cssで、デフォルトでサイドバーを非表示にします。次に、モバイルを超えていると思われる幅で、メディアクエリを使用してサイドバーを表示し、divに背景画像を読み込みます。

#sidebar {
    display: none;
}
#sidebar div#sidebar-img-1 {
    width: 100px;
    height: 100px;
}
/* ... */

@media only screen and (min-width: 480px) {
    /* display sidebar */
    #sidebar {
        display: block;
    }
    /* set background image for sidebar items */
    #sidebar div#sidebar-img-1 {
        background-image: url("sidebar1.jpg");
    }
    /* ... */
}

欠点は、スタイルシートにコンテンツを配置することで、パフォーマンスをセマンティクスと交換していることです。

于 2013-03-12T23:08:36.903 に答える