2

私は、網膜時代の非常に一般的な問題を解決するための良いアプローチを見つけようとしています。

以下が与えられたとしましょう：

  • レスポンシブ画像で Web サイトを作成する
  • CSS 背景画像なし
  • Web サイトの基本機能は JS なしで動作する必要があります
  • Web サイトの画像は、Retina ディスプレイ用に最適化する必要があります。

これを解決する簡単な方法は、次のようなものです。 

<img src="img.jpg" data-highres="img@2x.jpg" />

Retina デバイスが検出された場合は、img.jpg を img@2x.jpg と交換するための何らかの js を記述します。これは機能しますが、Retina デバイスで Web サイトに入ると、img.jpg と img@2x.jpg の両方が読み込まれます。帯域幅にあまり優しくありません:(

元の src がロードされる前に、画像の src を傍受して変更することは可能ですか?

または、問題を解決するための別のアプローチを持っている人はいますか?

4

4 に答える 4

1

将来的には、picture 要素を使用できるようになる可能性があります。それまでの間、私が見た唯一の有効なアプローチは次のとおりです。

  1. 画像が必要な場所に div または span を配置します。イメージのサイズとレイアウトになるようにスタイルを設定します。ある種の識別マークを追加して、見つけられるようにします (例: class="retina-image")
  2. 要素上または要素内にある画像のさまざまなサイズに関する情報を保存します (data-something属性を使用するなど) 。
  3. <noscript><img src="..." alt="..."></script>divの中に aを入れます
  4. DOM の準備ができている場合:
    1. JS を使用して、手順 1 の識別子を持つすべての要素を検索します
    2. 必要な画像の種類を検出する
    3. その画像に使用する URL を示す属性を見つけます
    4. ステップ1のコンテナ内のDOMに画像を追加します

これは、picturefill ライブラリで使用されるアプローチです。

于 2014-02-25T09:22:55.180 に答える
0

これはおそらく炎の餌になるでしょうが、ここに私の2セントがあります：

帯域幅に関する懸念は、主にモバイル プラットフォームの問題です。現在、ほとんどの最新のモバイル プラットフォームが高ピクセル密度のディスプレイを採用していることを考えると、これらのデバイスからの高解像度画像に対する需要はかなり高くなるでしょう。100% の時間で 2 倍の解像度を提供できるのに、なぜ 3 倍の解像度の画像を 90% の時間 (低解像度と高解像度の画像) で提供するのでしょうか?

したがって、一部のシナリオでは、高解像度の画像 (幅/高さのスタイルを半分にする) を提供し、そのままにしておく方が簡単な場合があります。これにより、他の場所で (高価な) 時間とエネルギーを節約できます。すべてが妥協のように見える業界では、これがアプローチとして最も理にかなっている場合があります。

于 2014-02-25T13:04:55.833 に答える
0

クエンティンは本質的にあなたの質問に答えたと思います。

私が付け加えることができるのは、src のない img 要素を持っている間、それは技術的に仕様ごとではありませんが、それを省略してもコードが壊れることはなく、プリロードを避けることができるということです。次に<img data-src="" data-src2="">、JavaScript を使用して画像を取り込んだり入れ替えたりすることができます。要素はおそらくこれ<noscript>を行う「正しい」方法ですが、コードが非常に冗長になり、一部のブラウザーでは画像もプリロードされると聞きました<noscript>。

画像をレスポンシブ (Retina ディスプレイを含む) にするサービスの 1 つにPixtulateがあります。また、ページの読み込みが完了する前に img.src URL を正しくサイズ変更して置き換える JavaScript も提供します。ドロップインするのはかなり簡単なはずです。

于 2014-02-28T21:06:36.753 に答える