【发布时间】：2012-10-03 13:13:37
【问题描述】：
我正在处理的一个网站有很多从数据库中提取的图像。图像的尺寸不一致，我试图将它们显示在统一大小的框（div）中。我不知道任何图像的尺寸，但我可以通过以下方式检索它们：
document.getElementById( myImage ).width
document.getElementById( myImage ).height
在此之后，我进行了测试以了解如何调整图像大小以适合统一框。最后我设置了效果：
document.getElementById( myImage ).width = theNewWidth
document.getElementById( myImage ).height = theNewHeight
通过在 img 标签中使用onload="resizingFunction( imgId );"，每个图像只调用一次此函数。数据库中的每个图像完成此功能大约需要 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;
}
【问题讨论】：
-
为什么不在服务器端调整图像大小？加载许多大图像会影响性能。您说该函数不再运行图像，但它看起来总是在页面加载时运行，并且您似乎没有更改图像的实际大小并将其存储在某个地方。
-
您尝试过 CSS 解决方案吗？有一个包装图像的容器将它们设置为 css
max-width和max-height属性？ -
您可以通过 PHP 提供图像，并在 URL 中包含一个额外的尺寸参数。如果存在该尺寸的图像，请提供它。如果没有，请加载原始图像，调整大小并存储调整后的版本。这应该不会太复杂......
-
我发现了问题，它是 PHP 回显将信息写入 JavaScript 并且使用 JavaScript 编写 innerHTML 显然比仅将其编写为普通 HTML 慢。我只是将 PHP 回显重新定位到 内部并让它回显 HTML
-
没关系，这仍然没有想象的那么快。我想我想知道为什么使用宽度和高度属性会减慢网站速度。
标签： php javascript html image resize