2

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

实际上，在图像页面上，它会加载全尺寸图像，并将其压缩到布局中的一个框中。我知道那不是正确的做法；我应该发送已经是正确尺寸的图像。但问题来了：调整图像大小以适应的框是基于浏览器窗口的大小。因此，如果页面较大，则图像较大，如果页面较小，则图像较小。

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

什么是最好的解决方案？如果我唯一的目标是速度怎么办？如果我的空间有限，无法存储多种尺寸的图像怎么办？如果我的计算能力有限怎么办？

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

4

4 回答 4

1

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

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

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

于 2012-09-26T21:04:32.793 回答
0

好的，所以您要攻击的是速度。学习“完美”的方式也是需要努力的。

一个“完美”的解决方案，将使用各种具有不同比例的图像，如你所描述的，或者使用基于矢量的图像，这些图像不会随比例损失质量。

这更多地涉及应用程序架构。

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

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

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

于 2012-09-26T20:57:52.263 回答
0

我会试试这个：

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

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

于 2012-09-26T20:58:50.660 回答
-1

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

如果以像素为单位，请将您的图像放在一个盒子中并使用 css 来操纵图像大小。将img标签的css属性设置为fluid。使用基于百分比的样式。

例子

.img_elem{ width: 100%; }

在 html 中

<Div class"what-ever-ur-container-is">
     <Img class"img_elem" src"../path/to/file.jpg" />
</div>
于 2012-09-26T21:01:00.580 回答