私が取り組んでいるサイトには、データベースから取得した画像がたくさんあります。画像のサイズが一定ではなく、均一なサイズのボックス (div) に表示しようとしています。画像のサイズはわかりませんが、次の方法で取得できます。
document.getElementById( myImage ).width
document.getElementById( myImage ).height
この後、テストを行って、均一なボックスに合わせて画像のサイズを変更する方法を確認します。最後に、次のように効果を設定します。
document.getElementById( myImage ).width = theNewWidth
document.getElementById( myImage ).height = theNewHeight
この関数はonload="resizingFunction( imgId );"、img タグで使用することにより、画像ごとに 1 回だけ呼び出されます。データベース内のすべての画像がこの関数を完了するのに約 1 ～ 2 秒かかり、これらの画像に対して関数が再度実行されることはありません。二度と実行しないにもかかわらず、この機能を使用すると、サイトの実行が大幅に遅くなります。グーグルで調べた後、追加しようとしました：
document.getElementById( myImage ).removeAttribute("width")
document.getElementById( myImage ).removeAttribute("height")
新しい幅と高さを設定する前。これにより速度は向上しましたが、画像のサイズを変更しなかった場合よりもまだ遅くなります。繰り返しますが、明確にするために、各画像はロード後に一度サイズ変更されますが、何らかの理由でサイトの速度が低下します.
画像は、PHP を JavaScript にエコーすることによって作成されます。これが必要なのは、データベース (PHP) からの情報が必要であり、JavaScript がそれらを正しいボックス (div) 内に配置するためです。イメージコードの作成は次のとおりです。
echo "\t\t\tdocument.getElementById('gBox".$i."').innerHTML = '<img onload=\"image_applyToGrid(".$i.");\" id=\"img".$i."\" style=\"left:0; top:0;\" src=\"'+gBoxes[".$i."].imgPath+'\"/>';\n";
画像がオンロード時に呼び出す画像サイズ変更関数は次のとおりです。
function image_applyToGrid(inId) {
inIdImage = document.getElementById("img"+inId);
var imgW = inIdImage.width;
var imgH = inIdImage.height;
if (imgW > imgH) {
var proportions = imgW/imgH;
imgH = gridUnit;
imgW = gridUnit*proportions;
inIdImage.style.left = -((imgW-gridUnit)>>1)+"px";
}
else {
var proportions = imgH/imgW;
imgW = gridUnit;
imgH = gridUnit*proportions;
inIdImage.style.top = -((imgH-gridUnit)>>1)+"px";
}
inIdImage.removeAttribute("width");
inIdImage.removeAttribute("height");
inIdImage.width = imgW;
inIdImage.height = imgH;
}