Question

我正在开发一个图像托管网站，主要是为了学习绳索，我正在使用php和mysql，以及html，css和javascript。

实际上，在图像页面上，它会加载全尺寸图像，然后将其移动到布局中的框中。我觉得这不是正确的事;我应该发送已经是正确尺寸的图像。但是这里有麻烦：图像调整大小以适应的框是基于浏览器窗口的大小。因此，如果页面较大，则图像较大;如果页面较小，则图像较小。

我想到的一个解决方案是将图像存储为几种不同的大小，然后在页面上使用javascript来确定窗口大小，然后是框的大小，然后使用该信息选择要加载的正确图像。但所有内联javascript似乎也会减慢很多东西。

最佳解决方案是什么？如果我唯一想要的是速度怎么办？如果我有足够的空间来存储多种尺寸的图像怎么办？如果我的计算能力有限怎么办？

我正在努力学习这些东西;不只是实现它。分析各种选项的犹豫不决的答案会很棒。

Answer 1

在文档加载之前，您应该能够在JavaScript中检测窗口大小，因此在评估窗口大小调整然后加载正确的图像（这无论如何都是第二个请求）时，实际上没有性能损失。您应该只检查窗口大小，创建一个获取所需图像大小的PHP脚本，然后通过将参数附加到img src属性，使用该脚本在加载文档后拉入正确的图像。实际上，无论你如何按照这些方式进行操作，性能影响都是微不足道的，因为默认情况下图像是不同的请求，这将是你的瓶颈。

如果您的空间有限且图像很多，您可以使用PHP动态创建每个请求的图像（使用调整后的缓存）。如果您的计算能力有限，则需要进行更多的缓存，或者如果您有一小部分可能性，则可以预先制作图像。或者，您可以使用某些“里程碑”类型的图像，因为通常必须在多次通过中进行具有较大差异的图像重采样，因此每个里程碑可以允许更少的传递采样到所需的精确尺寸。

如果传输速度理论上是一个主要问题，您也可以使用图像切片。由于大多数客户端将允许连续2个以上连接到同一主机，因此如果图像足够大以保证它（抵消请求启动的成本），则可以拆分图像，然后显示合并在页面上的部分（类似于多路复用）

Answer 2

好的，你要攻击的是速度。学习“完美”的方式也是可以解决的问题。

一个“完美”的解决方案，就是使用各种不同尺度的图像，或者使用不会因尺度而损失质量的矢量图像。

这将进一步融入应用程序架构。

你想要的是先学习一些基本的javascript事件处理程序。

学习动态调整DOM元素大小的基础知识是您应该研究的内容。

如果要动态调整图像的高度和宽度，则应研究.bind('resize')事件。

Answer 3

我会试试这个：

加载小图片作为占位符
使用javascript检测窗口大小
进行ajax调用以加载更大的版本
将屏幕尺寸保存为Cookie或会话变量
根据该变量
检测调整大小事件并更新该变量

在服务器上，在上传时准备几个尺寸。

Answer 4

当您说 size 时，您的意思是以像素为单位还是以千字节为单位？

如果是像素，请将图像放在一个框中，然后使用css来操作图像大小。将img标记的css属性设置为流体。使用基于百分比的样式。

实施例

.img_elem{ width: 100%; }

在html中

<Div class"what-ever-ur-container-is">
     <Img class"img_elem" src"../path/to/file.jpg" />
</div>

根据窗口大小发送正确大小的图像

4 个答案: