ボックス (div) 内に多数の画像がグリッド (絶対配置) として並べ替えられるサイトに取り組んでいます。ボックスに合わせて画像のサイズを変更すると、サイトの速度が大幅に低下することに気付きました。たくさんの画像 (342) がありますが、サイズを変更しないとサイトの実行速度が速いため、なぜそうなのかわかりません。
注意: 将来、ボックスの動的サイズ変更を実装する予定です。すべての画像を別のサイズで保存するという答えを避けるために、これについて言及します。別の実装方法ではなく、速度低下の原因を知りたいと思っています。
グリッドは、最初は 150px * 150px のボックス (div) で構成されています。グリッドは にあり<body>、最初は画像がありません (空の div のみ)。本文が読み込まれると、JavaScript 関数が画像を適切なボックスに配置します。JavaScript 関数は、データベースからの画像の取得とサイズ変更を PHP に依存しています。PHP のそのセクションの手順は次のとおりです。
1.) PHP はデータベースから画像ファイル名を取得します。
2.) PHP は画像の寸法 (ピクセル単位) を取得し、それらを 2 つの変数に保存します。ここではそれらを x および y と呼びます。
3.) x と y を変更して、画像が 150px * 150px (またはボックスの初期寸法に割り当てた初期値) に収まるようにします。
4.) 私は に使用echoしwrite document.getElementById("PHP given Id").innerHTML = '<img src="PHP given filename" style="width:PHP x value; height:PHP y value"/>';ます。
コードのステップ 3 をコメント アウトすると、サイトはすぐに実行されます (つまり、画像の既定のサイズから x と y を変更する部分をコメント アウトしています)。インライン CSSの代わりに幅と高さの属性を設定しようとしました<img>が、速度の問題は解決しません。