2

私は主にロープを学ぶために画像ホスティングウェブサイトを開発しており、phpとmysql、およびhtml、css、javascriptを使用しています。

そのまま画像ページにフルサイズの画像を読み込み、レイアウト内のボックスに押し込みます。それは正しいことではないと思います。すでに適切なサイズの画像を送信する必要があります。しかし、ここに問題があります。画像が収まるようにサイズ変更されるボックスは、ブラウザウィンドウのサイズに基づいています。つまり、ページが大きい場合は画像が大きくなり、ページが小さい場合は画像が小さくなります。

私が考えた解決策の1つは、画像をいくつかの異なるサイズで保存し、ページでjavascriptを使用してウィンドウサイズを決定し、次にボックスのサイズを決定し、その情報を使用してロードする適切な画像を選択することです。しかし、そのすべてのインラインjavascriptは、物事を大幅に遅くするようです。

これに対する最善の解決策は何ですか？私が目指しているのがスピードだけだとしたら？複数のサイズの画像を保存するスペースが限られている場合はどうなりますか？計算能力が限られている場合はどうなりますか？

私はこのことについて学ぼうとしています。実装するだけではありません。さまざまなオプションを分析する優柔不断な答えは素晴らしいでしょう。

4

4 に答える 4

1

ドキュメントが読み込まれる前に JavaScript でウィンドウ サイズを検出できるはずなので、ウィンドウのサイズを評価して適切な画像を読み込む際にパフォーマンスが低下することはありません (とにかく 2 番目の要求でした)。img srcウィンドウのサイズを確認し、目的の画像サイズを取得する単一の PHP スクリプトを作成し、それを使用して、属性に引数を付けてドキュメントが読み込まれた後に適切な画像を取得する必要があります。画像はデフォルトで個別のリクエストであり、それがボトルネックになるため、これらの線に沿ってどのように実行しても、パフォーマンスへの影響はわずかです。

スペースが限られており、画像が多い場合は、PHP を使用してリクエストごとに画像を動的に作成できます (キャッシュを調整して)。コンピューティング能力が限られている場合は、キャッシュを増やしたいか、可能性のセットが少ない場合は画像を事前に作成することができます。別の方法として、特定の「マイルポスト」タイプの画像を使用することもできます。これは、大きな分散を伴う画像のリサンプリングは通常、複数のパスで実行する必要があるためです。各マイルポストでは、必要な正確なサイズにサンプリングするためのパスを少なくすることができます。

転送速度が理論的に重要な問題である場合は、画像スライスを使用することもできます。ほとんどのクライアントは同じホストへの 2 つ以上の連続接続を許可するため、画像が十分に大きい場合は画像を分割し (リクエスト開始のコストを相殺)、ページにマージされたセクションを表示できます (多重化のようなもの)。 .

于 2012-09-26T21:04:32.793 に答える
0

わかりましたので、攻撃しようとしているのは速度です。「完璧な」方法を学ぶことも、うまくいくものです。

「完璧な」ソリューションは、説明したようにさまざまなスケールのさまざまな画像を使用するか、スケールで品質を失わないベクトルベースの画像を使用することです。

これは、アプリケーション アーキテクチャに深く入り込みます。

あなたが望むのは、最初にいくつかの基本的な JavaScript イベント ハンドラーを学習することです。

DOM 要素の動的なサイズ変更の基本を学ぶことは、検討すべきことです。

画像の高さと幅を動的にサイズ変更する場合は、.bind('resize')イベントを調査する必要があります。

于 2012-09-26T20:57:52.263 に答える
0

私はこれを試します：

  • 小さな画像をプレースホルダーとして読み込む
  • javascript を使用してウィンドウ サイズを検出する
  • より大きなバージョンをロードするためにajax呼び出しを行います
  • その画面サイズを Cookie またはセッション変数に保存する
  • その変数に基づいて次の画像を呼び出します
  • サイズ変更イベントを検出し、その変数を更新します

サーバーでは、アップロード時にいくつかのサイズを用意します。

于 2012-09-26T20:58:50.660 に答える
-1

サイズと言うとき、ピクセル単位とキロバイト単位のどちらを意味しますか?

ピクセル単位の場合は、画像をボックスに入れ、css を使用して画像サイズを操作します。img タグの css プロパティを流動的に設定します。パーセンテージ ベースのスタイルを使用します。

例

.img_elem{ width: 100%; }

htmlで

<Div class"what-ever-ur-container-is">
     <Img class"img_elem" src"../path/to/file.jpg" />
</div>
于 2012-09-26T21:01:00.580 に答える