第1405天:这样加载 mapbar api js 可能比较理想,使用 mapbar api 31.4

星期日 晴朗 6~21℃

这样加载 mapbar api js 可能比较理想

官方的方法是把 js 放在 head 加载,然后用 window.onload 执行,这样会有一个问题,进入这个页面时比较慢。

我的做法是在页面底部加载 mapbar 的 js,因为用的是 jquery,所以没有用 window.onload,而是用了 jquery 的 ready(),但是发现这样会有一个问题,有时会提示 maplet is undefined。

window.onload 是所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后才执行;

而 jquery 的 ready() 是在 DOM 被解析之后就执行,在图像和外部资源加载之前就执行。

今晚想到用 jquery 的 getScript() 的回调,应该是比较理想的:

<script type="text/javascript" src="mapbar_api.js"></script>
<script type="text/javascript">
$(function(){
 $.ajaxSetup({cache:true}); // 启用缓存,避免每次都重新加载mapapi.js
 $.getScript("mapbar_api.js", function(){
  initMap();
 });
})
</script>

注意:前面一定要先引用一次 <script type="text/javascript" src="mapbar_api.js"></script>,否则有些地方会出错,例如在调用 maplet.resize() 的时候。

2012-4-14 更新:

发现在 IE 浏览器下,还是把 js 放在 <head> 内会更理想,$.ajaxSetup 对 IE 看起来没有效果或效果不大,而放在 <head> 内,只是初次访问页面时会稍微卡一下,二次访问就不影响了。

基于这一点考虑,建议还是把 js 放在 <head> 内。至于触发,如果是用 jquery,那么建议用 $(function(){ initMap(); }),而不是用 window.onload,以避免其他 js(例如站点统计 js)的阻滞。


使用 mapbar api 31.4

虽然官方宣布的最新 api 是 31.3,但是最近发现 31.4 已经可以调用了,首先发现的不同之处是气泡的 UI 发生了变化,看起来更好看了,还加了投影。


友吧今天

  • 清理模板目录,移除 v3 暂不需要的模板;
  • 场馆详细页第五晚。

 

RSS

上一篇:

下一篇:

发表评论

电子邮件地址不会被公开。 必填项已用*标注