事情是这样的：我有一个谷歌地图，里面有很多标记。
问题是地图加载，保持空白一段时间，然后才显示标记。标记是自定义的 PNG。
我的想法是“预加载”它们（不确定这是正确的词），以便它们几乎与地图同时出现。
到目前为止，我所做的是添加我在地图上使用的相同图像，在地图之外，在页面的前面display:none;
我不确定，但似乎地图和图像显示之间的时间已经减少。
这是最好的方法吗？这是一个好的做法吗？
问问题
1305 次
3 回答
1
您可以使用“精灵”，即在 1 个单独的 png 上收集单独的图像。这具有仅需要 1 个负载即较少单独负载的优点。Google GWT 大力推动了这种技术（即图像包）。
这种技术的价值随着需要加载的离散图像的数量而增加：单独的图像越多，加载它们所需的时间就越长。
于 2009-12-14T15:19:11.583 回答
1
不要display:none用于预加载。因为设置为的元素display:none不会呈现其任何物理属性，所以浏览器不会费心下载它，直到它变得可见。
另一种方法是使用visibility:hidden，但您冒着遇到几乎做同样事情的用户代理的风险。visibility:hidden要求浏览器计算图像的盒子模型，这需要加载图像（以获取尺寸）。不过，我不相信这在 IE6 中有效。
</body>最后一种技术（也是我最喜欢的）是在标签之前直接创建一个 div 。用 绝对定位它left: -99999999px; top: -99999999px。浏览器被迫渲染图像（并因此加载它们）并且没有乱七八糟的 Javascript 需要处理。
现在，要将其与您的问题集成，请将 Google 地图的代码放在“预加载 div”之后。在运行代码以创建地图之前，您的浏览器将被迫加载图像。这应该可以解决您的问题。
希望这可以帮助！
于 2009-12-14T15:33:28.790 回答
0
根据我对大多数现代浏览器的回忆，图像总是加载一次（假设图像的 src 是相同的）。我猜你的意思是在地图加载之前加载它们。
在我看来，in 并没有那么重要。与地图图像本身相比，标记应该相对较轻，无论如何我都无法在没有地图的情况下使用它们。
如果您认为它可以改善您的用户体验，那么我认为这是一个很好的做法，但我会尝试让它们以更清洁的方式进行，可能是页面加载早期的 ajax 调用？
于 2009-12-14T15:21:48.007 回答