【发布时间】:2011-09-27 14:28:24
【问题描述】:
我正在使用 Google Maps V3 API 创建一个 google 地图,其中的标记会在鼠标悬停时更改其标记图标。但是,我注意到用户第一次对特定标记和每个标记进行操作时图标会闪烁一次,我猜这是由于鼠标悬停图像需要一些时间来下载。
为了解决这个问题,我正在考虑预加载鼠标悬停图标图像。我该怎么做?
【问题讨论】:
标签: javascript jquery google-maps google-maps-api-3
我正在使用 Google Maps V3 API 创建一个 google 地图,其中的标记会在鼠标悬停时更改其标记图标。但是,我注意到用户第一次对特定标记和每个标记进行操作时图标会闪烁一次,我猜这是由于鼠标悬停图像需要一些时间来下载。
为了解决这个问题,我正在考虑预加载鼠标悬停图标图像。我该怎么做?
【问题讨论】:
标签: javascript jquery google-maps google-maps-api-3
我不确定这是否适用于所有浏览器,但在启用缓存的现代浏览器(FF 3.6+、IE8/9(我认为)、Safari/Chrome)上,只需将元素添加到 DOM 即可加载它们并缓存它们(即将它们放在页面上的隐藏 div 中),因此下次请求它们时,它来自您的缓存,而不是服务器,完全消除了闪存。
【讨论】:
<div style="display:none;"><img src="/path/to/marker/you/want/to/preload.png" /><img src="/path/to/marker2/you/want/to/preload2.png" /></div>。当浏览器呈现您的页面时,它会从服务器请求这些图像,并且(通常)将它们放入您的缓存中。因此,下次您请求它时(即当您将鼠标悬停在标记上时)它会立即从该人的计算机而不是您的服务器获取它。