代码之家 › 专栏 › 技术社区 › Guillaume Flandre

如何预加载图像以便在页面上的其他地方更快地加载图像,这是一个好的实践吗?

image-loading preload google-maps

2

Guillaume Flandre · 技术社区 · 15 年前

事情是这样的:我有一张谷歌地图,里面有很多标记。

问题是,地图加载后,会在一段时间内保持为空,然后才会显示标记。标记是定制的PNG。

我的想法是“预加载”它们(不确定它是正确的词),因此它们几乎与地图同时出现。

到目前为止,我所做的是添加我在地图上使用的相同图像,在地图外,在中的页面前面 display:none;

我不确定,但似乎地图和图像显示之间的时间缩短了。

这是最好的方法吗?这是一个好的实践吗?

3 回复 | 直到 15 年前

1

jldupont 15 年前

您可以使用“sprites”,即一个单独的图像集合在一个PNG上。这样做的优点是只需要1个负载,即分离负载更少。谷歌GWT对这项技术有很大的推动作用(即图像捆绑)。

这种技术的价值随着需要加载的离散图像数量的增加而增加:分离的图像越多,加载它们所需的时间就越长。

2

1

mattbasta 15 年前

不要使用 display:none 用于预加载。因为元素设置为 显示:无 不渲染任何在它的物理属性中,浏览器不需要下载它,直到它被显示出来。

另一种选择是使用 visibility:hidden 但是,您会遇到执行几乎相同操作的用户代理。 可见性:隐藏 要求浏览器计算图像的框模型,这要求加载图像(以获取尺寸)。不过,我不相信这在IE6中有效。

最后一个技巧(也是我最喜欢的)是直接在 </body> 标签。绝对定位 left: -99999999px; top: -99999999px .浏览器被迫渲染图像(并因此加载图像),并且没有混乱的javascript需要处理。

现在,要将此与您的问题集成,请将您的Google地图的代码之后你的“预载舱”。您的浏览器将在运行创建地图的代码之前强制加载图像。这应该能解决你的问题。

希望这有帮助!

3

0

Jorge Córdoba 15 年前

根据我对大多数现代浏览器的回忆,图像总是加载一次(假定图像的SRC是相同的)。我猜你的意思是在地图加载之前加载它们。

在我看来,在没有那么重要。与地图图像本身相比,标记应该相对较轻,而且没有地图我也不能真正使用它们。

如果你认为它改善了你的用户体验,那么我认为这是一个很好的实践,但是我会尝试以一种更干净的方式来实现它们,可能是在页面加载的早期调用Ajax?