1

我正在处理的一个网站有很多从数据库中提取的图像。图像的尺寸不一致，我试图将它们显示在统一大小的框（div）中。我不知道任何图像的尺寸，但我可以通过以下方式检索它们：

document.getElementById( myImage ).width
document.getElementById( myImage ).height

在此之后，我进行测试以查看如何调整图像大小以适合统一框。最后我设置了效果：

document.getElementById( myImage ).width = theNewWidth
document.getElementById( myImage ).height = theNewHeight

onload="resizingFunction( imgId );"通过在 img 标签中使用，每个图像只调用一次此函数。数据库中的每个图像完成此功能大约需要 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;
}
4

3 回答 3

4

使用 Javascript 调整图像大小通常不是一种理想的方法。您正在消耗所有带宽来通过网络发送完整尺寸的图像，然后将它们缩小。更好的方法是从图像存储中提取图像并在服务器端调整它们的大小。然后将结果存储在服务器端缓存中，以便您可以为所有客户端请求提供优化的图像。这里不需要过多考虑缓存的概念，在这种情况下，它可以像目录或数据库中的新列一样简单。（FWIW，我不喜欢将二进制数据存储在数据库中，但这可能是另一个讨论）

见： http: //www.white-hat-web-design.co.uk/blog/resizing-images-with-php/

于 2012-10-12T17:08:51.230 回答
0

图片可能太大了。我建议准备图像以供网络使用。谷歌“优化网络图像”以获取有关如何执行此操作的一些想法。

于 2012-10-12T17:04:26.680 回答
0

拍摄全尺寸图像并以不同尺寸加载整个图像是不好的做法。考虑生成缩略图并将其放置在页面上。

如果您有一个 2500x2500 的图像，而您只是将高度和宽度设置为 500x500，则仍然需要加载整个 2500x2500 的图像。

于 2012-10-12T17:06:24.130 回答