0

我对网站性能有疑问。我有 4 个大图像（1920*500px）需要在主页上以某种滑块显示 - 用户需要单击以显示下一个图像，它不是幻灯片放映。加载主页时，只看到第一张图片，其余的只有在用户请求时才需要看到。我的问题是下一个。创建一个大图像（精灵）并将其用作背景是否明智（这些图像集中在中心，具有支持此分辨率的显示器的用户可以看到孔图像，没有那种显示器的用户会尽可能多地查看）或使用标准img标签，或者有​​更好的方法来做到这一点？

4

3 回答 3

3

使用 sprite 的优点是您可以保存 HTTP 请求并预加载图像（例如，这对于响应式图像翻转至关重要）。

在您的情况下，我认为精灵没有任何意义。首先，您只保存了三个 http 请求（第一个图像可能在您加载页面时可见），并且您强制每个访问者下载这些大图像，即使他们不会看到它们。

于 2012-12-19T00:57:41.937 回答
0

我不确定我是否理解您的要求，但如果您总是渲染其中一张图像，那么像这样创建全屏背景图像可能是明智之举。必要时也可以用js更改背景图片

<style>
html
{ 
  background: url("your image") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity:1;
}
</style>
于 2012-12-19T00:52:21.983 回答
0

使用 jQuery 更改类。

.bg-1 { background: url("your image") no-repeat center center fixed; }
.bg-2 { background: url("your image 2") no-repeat center center fixed; }
.bg-3 { background: url("your image 3") no-repeat center center fixed; }
于 2012-12-19T01:29:12.567 回答