Question

我创建并编码了我自己的css导航栏（灵感来自苹果，如果它可以帮助你想象），这意味着我有4个状态的动态按钮，我用css样式表管理。我只有两个图形，一个带按钮状态，另一个带有程式化的“文本”。

但是，我喜欢这样做，以便nab bar的图形预先加载到我的网页中。

1）这可能吗？

2）它有用吗？

3）如果两个问题都是，那么代码是什么？

Answer 1

我真的没有看到预加载这些图像的重点。如果图像是静态的并且始终引用没有参数的同一文件，它们将被浏览器缓存，并且仅在访问者第一次访问您的站点时加载（除非您使用某些花哨的http标头设置阻止缓存），并且客户端浏览器缓存进一步请求。你有一个导航示例吗？

如果您担心加载时间，您可以很容易地使用类似于apple.com的导航，使用css3-gradient作为背景，外部容器的边框半径，并且只在IE样式表中声明背景图像作为后备选项，所以现代浏览器不会要求IE背景模式。

添加一些1px偏移文本阴影，为您的导航提供一些3d外观。

Answer 2

您可以使用JavaScript预先加载图片，也可以在页面的早期插入img标记并使用样式隐藏它们。

JavaScript示例：

<script>
image = new Image();
image.src = '/path/to/image.png';
</script>

您需要为要预加载的每个图像执行“image = ...”，“image.src = ...”。此代码将图像加载到浏览器的缓存中。

HTML / CSS示例：

<img src="/path/to/image.png" style="display: none;" />

以上内容将加载图片，但不会在页面上显示。