|
本文將向大家介紹百度地圖API的兩種不同加載方式：同步加載和異步加載。
同步加載
這是最常見(jiàn)的加載方式,，開(kāi)發(fā)者需要在頁(yè)面的head標(biāo)簽內(nèi)添加一個(gè)script標(biāo)簽,，標(biāo)簽的src屬性填寫(xiě)為地圖API的地址：
1 | <script src="http://api.map.baidu.com/api?v=1.2"></script>
|
此時(shí)腳本是同步加載的,，如果直接在瀏覽器敲入這個(gè)地址你會(huì)發(fā)現(xiàn)這段js腳本實(shí)際返回的內(nèi)容為：
1 2 | document.write('<link rel="stylesheet" type="text/css" <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.2&key=&services=&t=2922163450"></script>');
|
返回的腳本通過(guò)document.write方法寫(xiě)入了一個(gè)link標(biāo)簽和另一個(gè)script標(biāo)簽,，link標(biāo)簽負(fù)責(zé)加載API的樣式表文件，而另一個(gè)script則是地圖API真正的腳本資源,。當(dāng)然你也可以把腳本寫(xiě)在body標(biāo)簽內(nèi),，但是從規(guī)范角度來(lái)說(shuō)不建議這么寫(xiě)（html4規(guī)范上規(guī)定link標(biāo)簽只能存在于head標(biāo)簽內(nèi)）。一個(gè)完整的同步加載的代碼示例如下：
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>同步加載</title>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="map" style="width:500px;height:320px;"></div>
<script>
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
</script>
</body>
</html>
|
我們看到在地圖容器#map之后,，立刻插入了一個(gè)script標(biāo)簽,，標(biāo)簽內(nèi)直接編寫(xiě)調(diào)用API的代碼，效果如圖：
瀏覽器先加載API的資源然后再加載頁(yè)面其他元素,，通過(guò)資源加載順序圖可以更清晰的看到這一點(diǎn)：
注意這里的藍(lán)色豎線出現(xiàn)在API腳本加載（包括網(wǎng)絡(luò)時(shí)間和執(zhí)行時(shí)間）完以后,，這就表明了頁(yè)面正在同步加載API的JS腳本。此外還看到在加載主腳本的同時(shí)瀏覽器是被阻塞住的,，不能加載其他頁(yè)面資源,。當(dāng)然API也在逐漸努力減少同步加載JS的文件大小，這除了讓地圖本身展現(xiàn)速度更快以外,，還能最大限度的減少對(duì)第三方頁(yè)面的影響,。
如果使用地圖的頁(yè)面內(nèi)容較多，而地圖僅是一個(gè)小模塊時(shí),，可以考慮將API腳本放在body的最后,，而地圖初始化放在body的onload事件中：
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>同步加載</title>
<script>
function initialize(){
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:500px;height:320px;"></div>
<script>
</script>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
</body>
</html>
|
這樣API的腳本不會(huì)影響頁(yè)面其他元素,，雖然用法不太規(guī)范,。
異步加載
API支持完全異步加載,，使用方式如下：
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>異步加載</title>
<script type="text/javascript">
function initialize() {
var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=1.2&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map" style="width:500px;height:320px"></div>
</body>
</html>
|
我們通過(guò)動(dòng)態(tài)創(chuàng)建script標(biāo)簽的方式來(lái)添加對(duì)地圖API的引用，此時(shí)API腳本是異步加載的,，如果直接在瀏覽器輸入這個(gè)地址,，我們會(huì)得到下面代碼：
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'http://api.map.baidu.com/res/12/bmap.css');
document.getElementsByTagName('head')[0].appendChild(link);
window.BMap = window.BMap || {};
window.BMap.apiLoad = function () {
delete window.BMap.apiLoad;
if (typeof initialize == "function") {
initialize();
}
};
var s = document.createElement('script');
s.src = 'http://api.map.baidu.com/getscript?v=1.2&key=&services=&t=2922163450';
document.body.appendChild(s);
|
代碼里沒(méi)有了document.write，而是createElement動(dòng)態(tài)添加,。
我們還需要在引用地址里面添加callback參數(shù),，這是在告訴API加載完成后需要調(diào)用什么方法來(lái)初始化地圖。注意這個(gè)方法名必須是全局可見(jiàn)的,。此時(shí)我們?cè)賮?lái)看一下資源加載的瀑布圖：
雖然資源總數(shù)沒(méi)有什么變化,，但是會(huì)發(fā)現(xiàn)藍(lán)線和紅線的位置都大大提前，這就說(shuō)明地圖API腳本是異步加載的,，對(duì)頁(yè)面元素的加載沒(méi)有任何影響,。
|
