2

我在两个网站上看到了以下 CSS 规则

/* First example */
background: #F8F8F8 url('/images/noise.png?1333540701') top left;
/* Second example from a different site */
background: #F8F8F8 url('/images/noise.png?1326131369') top left; 

*.png?randomNumberspng图像路径后是什么意思?他们在这里服务的目的是什么?

第一个来自bastsov,另一个来自Matt Gemmell。两者都使用 Octopress 框架。

编辑 这两个规则并不是在同一个站点上使用的。每个规则来自不同的站点。

此外,似乎他们在任何地方都使用相同的数字,无论何时noise.png提及。例如,

/* rule for navigation bar */
background: url('/images/noise.png?1333540701'),linear-gradient(#E0E0E0,#CCC,#B0B0B0)
/* rule for #main */
background: #F2F2F2 url('/images/noise.png?1333540701') top left;

我在Matt Gemmell的网站上观察到了相同的模式,但数字不同。

4

3 回答 3

5

很可能这是对图像进行版本控制的一种方式,因为它们可能正在缓存图像。这样,如果图像被更新,他们可以更改数字以避免获取较旧的缓存图像。

于 2012-06-03T18:54:27.560 回答
3

随机数是GET发送到图像路径的请求。由于图像只是一个静态资源,因此当您将参数传递给它时,除了它的 URL 之外,什么都不会改变。

浏览器缓存图像以加快页面加载速度,但如果您更改图像的 URL,浏览器会重新下载图像。似乎noise.png每次都需要重新加载。

于 2012-06-03T18:55:10.290 回答
3

该数字只是发送到服务器以获取图像的 URL 的一部分。

这样做有两个常见的原因:

  • 服务端的资源不是静态文件,是由代码处理的,根据数量返回不同的图片。
  • 服务器会忽略该数字,它只是用于生成不同的 URL。这通常是出于缓存原因,因此更改数字将强制向服务器发出新请求。

在这种情况下,第二个原因似乎更有可能。当查询字符串用于返回不同的图像时,资源名称通常更通用。

于 2012-06-03T19:01:19.097 回答