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

Question

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

照原样，它在图像页面上加载完整尺寸的图像，并将其挤压到布局的一个框中。 我知道那不是正确的选择。 我应该发送已经正确大小的图像。 但这是麻烦所在：调整图像大小以适合其中的框是基于浏览器窗口的大小的。 因此，如果页面较大，则图像较大；如果页面较小，则图像较小。

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

最好的解决方案是什么？ 如果我的唯一目标是速度怎么办？ 如果我的存储空间有限，该怎么办？ 如果我的计算能力有限怎么办？

我正在尝试了解这些东西； 不只是实施它。 分析各种选项的优柔寡断的答案将是不错的选择。

Answer 1

您应该能够在JavaScript加载之前就检测到JavaScript中的窗口大小，因此在评估窗口大小并随后加载适当的图像（无论如何会是第二次请求）时，这实际上不会对性能造成任何影响。 您应该只检查窗口大小，创建一个单个的PHP脚本即可获取所需的图像大小，然后在通过将参数附加到img src属性来加载文档之后，使用该脚本来提取适当的图像。 实际上，无论您如何按照这些原则进行操作，性能影响都将是微不足道的，因为默认情况下图像是不同的请求，这将成为您的瓶颈。

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

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

Answer 2

好的，所以您要攻击的是速度。 学习“完美”的方法也是有待改进的。

“完美”的解决方案将是使用如上所述的具有不同比例的各种图像，或者使用不会随比例丢失质量的基于矢量的图像。

这更多地涉及到应用程序体系结构。

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

了解如何动态调整DOM元素的大小的基础知识。

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

Answer 3

我会尝试的：

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

在服务器上，上载时准备几个大小。

Answer 4

当您说大小时 ，您是指像素还是千字节？

如果以像素为单位，则将图像放在一个框中，然后使用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>