0

我正在一个站点上工作，该站点将在框（div）内有很多图像，这些图像被排序为网格（绝对定位）。我注意到调整图像大小以适应框会导致网站显着变慢。有很多图像 (342)，但我不明白为什么会这样，因为当我不调整它们的大小时，网站运行速度很快。

请注意：我计划在未来实现盒子的动态调整大小。我提到这一点是为了避免将每个图像保存为另一个尺寸的答案。我有兴趣了解减速的原因，而不是不同的实施方法。

网格最初由 150px * 150px 的框 (div) 组成。网格位于<body>并且最初没有图像（只有空的 div）。加载主体后，JavaScript 函数将图像放入相应的框中。JavaScript 函数依赖 PHP 从数据库中获取图像以及调整大小。以下是该部分 PHP 的步骤：

1.) PHP 从数据库中获取图像文件名。

2.) PHP 获取图像尺寸（以像素为单位）并将它们保存到两个变量中。我在这里称他们为 x 和 y。

3.) 我更改 x 和 y 以使图像适合 150px * 150px（或我分配给框的初始尺寸的任何初始值）。

4.) 我习惯echo了write document.getElementById("PHP given Id").innerHTML = '<img src="PHP given filename" style="width:PHP x value; height:PHP y value"/>';。

如果我在我的代码中注释掉第 3 步，则站点会快速运行（即注释掉从图像默认尺寸更改 x 和 y 的部分）。我还尝试设置<img>而不是内联 CSS 的宽度和高度属性，但这并不能解决缓慢的问题。

4

2 回答 2

6

调整图像大小需要相当多的计算能力，因此速度变慢。您可以做的最好的事情是使用 PHP 调整图像大小并保存缩略图，因此您只需执行一次。

于 2012-10-19T23:43:56.420 回答
0

使用gdphp 中的库动态加载图像并调整其大小，然后使用headerphp 中的函数告诉浏览器您正在发送图像（而不是文本）。您输出调整大小的图像。

使用这种方法，您可以对<img>标签使用类似的东西：

    <img src="script.php?file=someFile" style="width: 150px; height: 150px;" />

有了这个，您不需要为每个图像创建缩略图。

于 2012-10-20T19:11:25.590 回答