JavaScriptとHTML5で画像のズームイン機能を開発する必要があります。戦略が良くなる -JavaScriptとHTML5の画像拡大
単一の画像を取り、ズームレベルを適用する - 4Xとオンロード1Xのページショーの画像の - 私たちは、より高いズームレベル用の画像をダウンロードすることができます。 この方法では、テキストがたくさんある場合、イメージは特別に歪んで表示されますか？
異なるズームレベルの異なる画像 - これは確実にページの読み込み時間を増加させますが、これを避けたいと考えています。
私はの最初のオプションを使うことをお勧めします。
イメージが良好な解像度の場合、テキストは変形しません。 PNGを使用するか、可能であればSVGを使用してください。
第2の選択肢では、異なるレベルの異なる画像しか持たないので、ズーム効果は滑らかではありません。
スムーズにする必要はありませんが、ズームエフェクトで画像を読み込む時間を避けるために、ズームを実行する前にすべての画像をロードする必要があります。 しかし、その場合、1つの重いイメージを1回読み込み、異なるサイズのイメージを複数持つよりもスムーズにズームすることができます。
私は最高の異なるズームレベルのために（あなたは、彼らは常に良いになりますことを確認して、このように）異なる画像を作成し、（AJAXで）要求された場合にのみ、別のズームレベルをロードすることだと思う - この方法、あなたページ読み込み時間の増加を避けます。
一度にページ全体を読み込む必要があります。ページがロードされると、アプリケーションはオフラインで動作します。このため私はAJAXを使うことはできません。 – Dom
間違いなく、パフォーマンスが低下するネットワークトラフィックにオーバーヘッドが追加されます。したがって、1つの画像を使用してズームレベルを適用する方が良いでしょうが、これでpng、gifなどの画像タイプを選択できるようになりました。
実際には、pngの品質は良好で、この種の操作に適しています。
オプション3：['zoom' /' transform' CSSプロパティ]（http://stackoverflow.com/questions/2026294/zoom-css-javascript）。 –