发觉google的一些应用的javascript接口API的的js文件下载有时候会比较慢,会影响网站的加载。好像Google Map API v3的js下载经常都比较慢,影响整体网页的显示效果。所以今天特别研究动态载入javascript文件。网上搜索了一下,无非都是那几个方法。不过我发现JQuery本身就自带一个动态下载javascript文件的函数,无需用一些插件。
jQuery.getScript( url, [callback] ) 官方说明
非常容易加重js文件,1.2版本之后就可以支持跨域下载javascript文件。
于是我就用了动态加载Google Map API v3的javascripte文件。
$.getScript("http://maps.google.com/maps/api/js?sensor=false",function(){
alert("Script loaded and executed.");
});
虽然显示了警告信息”Script loaded and executed.”, 页面变成了空白页面了,真是不解。开始怀疑JQuery的.getScript的问题,于是试了官方的示范例子,并没有问题。于是修改官方例子动态下载google map api的js。同样页面也变成了空白页。
估计应该是google map api v3的api问题,观看了http://maps.google.com/maps/api/js?sensor=false的源代码
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
google.maps.Load = function(apiLoad) {
apiLoad([,[[["http://mt0.google.com/vt/v=ap.114&hl=zh-CN&","http://mt1.google.com/vt/v=ap.114&hl=zh-CN&","http://mt2.google.com/vt/v=ap.114&hl=zh-CN&","http://mt3.google.com/vt/v=ap.114&hl=zh-CN&"],,"ap.114"],[["http://khm0.google.com/kh/v=49&hl=zh-CN&","http://khm1.google.com/kh/v=49&hl=zh-CN&","http://khm2.google.com/kh/v=49&hl=zh-CN&","http://khm3.google.com/kh/v=49&hl=zh-CN&"],,"49"],[["http://mt0.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt1.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt2.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt3.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&"],,"apt.114"],[["http://mt0.google.com/vt/v=app.114&hl=zh-CN&","http://mt1.google.com/vt/v=app.114&hl=zh-CN&","http://mt2.google.com/vt/v=app.114&hl=zh-CN&","http://mt3.google.com/vt/v=app.114&hl=zh-CN&"],,"app.114"],"fzwq1Ofu9DMOwRrfzS_9mNjD8hXvTS89l593ng",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]]]],["zh-CN","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/zh_cn/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a"],[686055407],1], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a/main.js");
})();
请看getScript()函数,函数内用了document.write来再次插入javascript文件。就是这里搞到页面空白一片。上网搜索了一下解决方法:
在下班的的两个连接内找到了方法
http://august.lilleaas.net/unobtrusive_google_maps_with_jquery
http://code.google.com/intl/zh-CN/apis/maps/articles/static+js.html
原来需要动态加载google map api的时候需要在请求js文件的时候加回调函数作为参数。请求应该是:http://maps.google.com/maps/api/js?sensor=false&callback=map_init
这样请求的时候返回的javascript与原来的是不同的。请留意下边的代码 getScript的函数不再使用document.write了。而且在javascript下载完成后会自动调用map_init()函数,需要自己写一个map_init()函数
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
var s = document.createElement('script');
s.src = src;
document.body.appendChild(s);
}
google.maps.Load = function(apiLoad) {
apiLoad([,[[["http://mt0.google.com/vt/v=ap.114&hl=zh-CN&","http://mt1.google.com/vt/v=ap.114&hl=zh-CN&","http://mt2.google.com/vt/v=ap.114&hl=zh-CN&","http://mt3.google.com/vt/v=ap.114&hl=zh-CN&"],,"ap.114"],[["http://khm0.google.com/kh/v=49&hl=zh-CN&","http://khm1.google.com/kh/v=49&hl=zh-CN&","http://khm2.google.com/kh/v=49&hl=zh-CN&","http://khm3.google.com/kh/v=49&hl=zh-CN&"],,"49"],[["http://mt0.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt1.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt2.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt3.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&"],,"apt.114"],[["http://mt0.google.com/vt/v=app.114&hl=zh-CN&","http://mt1.google.com/vt/v=app.114&hl=zh-CN&","http://mt2.google.com/vt/v=app.114&hl=zh-CN&","http://mt3.google.com/vt/v=app.114&hl=zh-CN&"],,"app.114"],"fzwq2i5W0_vw_-9fFuwYnxkPJjzoLw6PvDzbBw",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]]]],["zh-CN","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/zh_cn/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a"],[4126402443],1], loadScriptTime);
map_init();
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a/main.js");
})();
这样就可以成功使用$.getScript动态加载google map api V3的javascript了。
function map_init()
{
alert("Script loaded and executed.");
}
$.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=map_init");