19

大きな画像を読み込んで、ブラウザにサイズを変更してもらいます。サイズを明示的に設定しています。

<img src="http://example.com/image1.jpg" width="240" height="360"/>

ページにはそのような画像がたくさんあります。スクロールは非常に遅く、途切れがちです。Chromeのイベントタイムラインは、スクロールすると次のようになります。

Paint

* Image decode (JPEG)
* Image resize (non-cached)
* Image decode (JPEG)
* Image resize (non-cached)
* ...

Paint

* Image resize (cached)
* Image resize (cached)
* Image resize (cached)
* Image resize (cached)

Paint

* Image decode (JPEG)
* Image resize (non-cached)
* Image decode (JPEG)
* Image resize (non-cached)
* ....

Paint

* Image resize (non-cached)
* Image resize (non-cached)
* Image resize (non-cached)
* Image resize (non-cached)

Paint

* Image decode (JPEG)
* Image resize (cached)
* Image decode (JPEG)
* Image resize (cached)
* ...

等

一部のPaintイベントに画像のデコードが含まれ、他のイベントに含まれない理由や、サイズ変更がキャッシュされる場合とされない場合がある理由がわかりません。ビューポートに入ってくる新しい画像と関係があるに違いないと思います。

ページの読み込み時に画像のサイズ変更コストを画像ごとに1回だけ支払い、スクロール中の画像のサイズ変更を回避するためにできることはありますか？

（もちろん、最善の解決策は、すでに適切なサイズの画像を読み込んでブラウザのサイズ変更を回避することであることを理解しています。この場合、これは実用的ではありません。）

4

4 に答える 4

8

この関数を使用すると、目的のスケールでサイズ変更された新しい画像に置き換えることで、画像のサイズを 1 回だけ変更できます。

function resizeImage(image, maxWidth, maxHeight) {

  // Output scale is the minimum of the two possible scales
  var scale = Math.min((maxWidth / image.width), (maxHeight / image.height))

  // Output canvas
  var outputCanvas = document.createElement('canvas')
  outputCanvas.width = image.width * scale
  outputCanvas.height = image.height * scale

  // Draw image content in output canvas
  var outputContext = outputCanvas.getContext('2d')
  outputContext.drawImage(image, 0, 0, parseInt(image.width * scale), parseInt(image.height * scale))

  // Replace image source
  image.src = outputCanvas.toDataURL()
}

パラメータとして渡す画像を受け取り、imageサイズを変更するキャンバスを作成し、を使用して属性を出力キャンバスのコンテンツにimage設定します。image.srctoDataURL()

サイズを変更する画像は相対パスにある必要があります(はい、クールではありません)。そうしないと、CORS が原因でセキュリティ エラーが発生します。

しかし、base64 データをsrc属性として渡すことができ、AJAX で簡単に行うことができます。

于 2013-02-07T21:19:42.890 に答える
1

あなたの問題は、同時に大量の画像、大量の大きな画像をダウンロードしていることです。大量の大きな画像があり、ユーザーの個々の RAM とプロセッサの制限がある場合、元のサイズ以外の異なるサイズへのレンダリングも遅くなります。

ブラウザに画像をレンダリングするように指示しても、ブラウザは元の画像サイズをロードし、その場で調整します。大きな画像は、サーバーからブラウザへのユーザーのインターネット接続を下って移動する必要があります。html 属性を使用すると、ダウンロード後に CSS を使用して画像サイズを変更するだけです。

あなたの最善の選択肢は、サーバー側で複数の画像サイズを作成することです。できれば、その場でではなくアセットの作成時に作成し、ニーズに最も近い画像サイズを呼び出します。スクリプトなどを使用してオンザフライで画像を作成する場合は、それらをサーバーに保存して後で再び使用できるようにし、ロード時間とサーバー リソースを削減します。

最後のヒントは、キャッシュしていることを確認することです。詳細はこちらhttp://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

于 2013-02-11T09:33:32.180 に答える
0

ここでCSSが役に立ちます。これはデフォルトとして機能し、個々の読み込み時間が遅くなる可能性があります。これを実現するには、画像の基本的な css を実行するだけです。以下参照：

 <img src="....." />

CSS には、例として次のコードが必要です。

 img {
height: 360;
width: 240;
}

次に、追加のコードを追加して、角、境界線、または必要な効果を丸くすることができます。

すべてのサイズ変更を回避するには、Photoshop で画像のサイズを変更することをお勧めします。次に、ページのさまざまな部分が表示されるため、画像を表示するだけで、各画像をレンダリングしません。

于 2013-02-03T22:35:08.950 に答える
-1

大きなメモリ消費（大きな画像が多すぎる、またはバックグラウンドで大きなメモリを使用するアプリケーションがある）、非表示（外部）がある場合、大きな画像はメモリ（RAM）にロードするのに時間がかかります。可視領域の）画像は（ハードドライブ上の）ページング/スワップファイルにプッシュされるため、画像が可視領域に来ると、ブラウザはハードドライブの速度（低速）でページング/スワップからそれをロードします。

この場合、1ページに大きな画像が多数あると、クライアントのブラウジングエクスペリエンスが低下するため、クライアント側のサイズ変更に依存することはできません。

オンデマンドで、または事前にサイズ変更（サムネイル）して、サーバー側で画像のサイズを変更することを検討する必要があります。

オンデマンド方式の場合、Apacheのmod_rewriteを使用して、画像をスクリプトにポイントし、サイズを変更して、クライアントのブラウザーから要求されている画像を表示できます。

人気のある画像共有/ホスティングサイトを見て、ランダムな画像を表示してそのURLをコピーし、別のタブに貼り付けて、URLの一部を変更/削除してURLを試してみてください。サーバー側で画像のサイズを動的に変更していることがわかります。

TLDR：サムネイルを使用するか、サムネイルを使用しないように主張する場合は、スクロールが途切れる可能性があるため、ページ上に多数の大きな画像をスムーズにスクロールすることはできません。

ああ、考慮すべきもう1つのことがあります。それは、そのようなメモリのニーズを処理するためにあなたの（そしてあなたのクライアントの）RAMを増やすことです

于 2013-02-04T02:47:06.337 に答える