代码之家 › 专栏 › 技术社区 › user1624005

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

pagespeed html javascript php

user1624005 · 技术社区 · 12 年前

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

实际上,在图像页面上,它加载全尺寸图像,并将其压缩到布局中的框中。我明白这不是正确的做法;我应该发送的图像已经是正确的大小。但问题是:调整图像大小以适应的框是基于浏览器窗口的大小。因此,如果页面较大,则为较大的图像,如果页面较小,则为较小的图像。

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

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

我正在努力学习这些东西;而不仅仅是实施它。分析各种选择的独立答案将是很好的。

4 回复 | 直到 12 年前

Matt Whipple 12 年前

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

如果您有有限的空间和大量的图像,您可以使用PHP根据请求动态创建图像(调整缓存)。如果你的计算能力有限,你会想更多地缓存,或者如果你有一小部分可能性,你可以预先制作图像。或者,您可以使用某些“里程标”类型的图像,因为具有大方差的图像重新采样通常必须在多个通道中进行,因此每个里程标可以允许更少的通道采样到所需的确切大小。

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

Dan Kanze 12 年前

好吧,你想要攻击的是速度。学习“完美”的方式也是一件需要努力的事情。

一个“完美”的解决方案是使用uve所描述的各种不同尺度的图像,或者使用不会随着尺度而失去质量的基于矢量的图像。

这将深入到应用程序体系结构中。

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

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

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

Moe Tsao 12 年前

我会试试这个:

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

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

-1

wallyk 12 年前

当你说大小你的意思是以像素还是以千字节为单位?

如果以像素为单位,请将图像放在一个框中,并使用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>