Question

我正在处理的网站有很多从数据库中提取的图片。图像的尺寸不一致，我试图用统一大小的框（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";

这是图像调整大小功能，图像调用一次onload：

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;
}

Answer 1

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

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

Answer 2

图像可能太大了。我建议准备图像供网络使用。谷歌“为网络优化图像”提供了一些关于如何做到这一点的想法。

Answer 3

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

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

JavaScript图像调整速度慢

3 个答案: