1

解像度に応じて解像度の低い画像を読み込むことで、ページの読み込みを高速化するためにこのコードを作成しました...

window.onload = function() {
    bannerRes();
    function bannerRes() {
        var x = $(window).width();
        var y = $("#banner");
        if(x<=1920) {
            y.css('backgroundImage', 'url(team_banner_1920.jpg)');
        } else {
            y.css('backgroundImage', 'url(team_banner_2560.jpg)');
        };
    };
    $(window).resize(function() {
        bannerRes();
    });
};

しかし、それを使用する価値があるかどうか、または問題が発生する可能性があるかどうかはわかりません. ご意見をお願いします。ありがとうございました

4

3 に答える 3

1

アダプティブ イメージ ソリューションを実装しているようです。

このトピックに関する多くの議論が W3C で行われているため、「専門家」がこのトピックを調べていることに注意してください。

モバイル デバイスの iOS Retina ディスプレイに配信する場合、状況はさらに複雑になります。「倍密度」が必要だからです。また、イメージ メンテナンスと JS コードを効果的に 2 倍にして、クロスデバイス エクスペリエンスを維持します。

問題は、今後数年後に新しいデバイスが登場するたびにコードを更新しなければならない場合、これがメンテナンスの悪夢になる可能性があることです。

これに対する最初の解決策は @media-query を使用することです。これにより、css で画像を維持し、JS を簡素化することができます。

W3C で保留中の興味深いトピックは<picture/>、dom 属性レベルでレスポンシブ キャパシティを提供するタグです。したがって、css と JS のフットプリントの両方を回避します。しかし、これは現時点ではまだ見られません。

それが役立つことを願っています。

于 2012-09-20T16:35:44.313 に答える
0

jqueryのアニメーションを使用して画像のサイズ変更を試すことができます...サーバー上にある画像は1つだけで、それに応じてサイズを変更できます...

この質問には、それを行う方法についての答えがあります...

于 2012-09-20T16:25:53.873 に答える
0

価値があるかどうかは、あなただけが判断できます。

Google がランキング アルゴリズムにページの読み込み速度を考慮していることはよく知られているため、これが懸念事項である場合は効果的である可能性があります。

あなたのサイトへのトラフィックは多いですか?ユーザーがさまざまな画面解像度を持っている可能性はありますか? サイトの統計からそのようなことを推測できますか?つまり、画面解像度の広い分布からヒットがありますか?

要するに、ここで答えることは実際には不可能です。サイトでより詳細な情報を提供した場合は、推測できる可能性がありますが、それでもいくつかの指標を自分で試した方がよいでしょう.

于 2012-09-20T16:21:35.393 に答える