Question

我正在开发一个网站，里面有很多图像（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，但这并不能解决慢速问题。

Answer 1

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

Answer 2

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

使用这种方法，您可以对<img>标记使用类似的内容：

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

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

调整<img/>的大小会导致缓慢

2 个答案: