JavaScript图片调整缓慢

我正在处理的网站有很多从数据库中提取的图像。图像的尺寸不一致，我试图在统一大小的盒子（div）中显示它们。我不知道任何图像的尺寸，但我可以检索它们：JavaScript图片调整缓慢

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

来源

2012-10-12 asimes

你为什么不调整在服务器端的图像？加载许多大图像会影响性能。你说这个函数永远不会再运行一个图像，但它看起来总是在页面加载时运行，它似乎并没有改变图像的实际大小并将其存储在某个地方。 –

您是否尝试过使用CSS解决方案？有一个容器包装图像设置他们都css的'max-width'和'max-height'属性？ – VKen

您可以通过PHP提供图像，并在URL中包含一个额外的大小参数。如果存在这种尺寸的图像，请提供。如果没有，请加载原始图像，调整其大小并存储调整后的版本。这不应该太复杂... –

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

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

来源

2012-10-12 17:08:51

我会尽力，谢谢 – asimes

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

来源

2012-10-12 17:04:26

不幸的是没有一个选项。而且，大多数图像都非常小，因为它们很老。大多数图像小于150x150，这是我按比例扩展它们（隐藏突出框的部分，溢出：隐藏）。 – asimes

采用全尺寸图像并以不同尺寸加载整个图像是一种不好的做法。考虑让缩略图生成并放置在页面上。

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

来源

2012-10-12 17:06:24 dgarbacz

这是一般情况下相反的问题。大多数图像太小，我想扩大它们至少150x150（隐藏溢出的图像部分：如果不是正方形，则隐藏）。 – asimes

JavaScript图片调整缓慢

回答

相关问题