`
alexcheng
  • 浏览: 177908 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

延迟加载Yahoo! Map (Yahoo! Map lazy loading)

YahooJavaScriptCSSXMLHTML 
阅读更多
通常使用Yahoo! Map的时候，是采用其网站提供的方法：
js 代码
  1. <script type="&lt;/span">"text/javascript"
  2. src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid=YahooDemo">
  3. </script>
这种做法的缺点是在页面加载的时候就会去加载Yahoo! Map的javascript文件，这会造成页面加载速度变慢。因为它的javascript是采用document.write的方法来输出其需要包含的其他javascript文件的，因为不能直接采用动态创建script元素的方式来延迟加载。

我的做法是把Yahoo! Map的加载的javascript文件的内容提取出来，把其中的document.write改成动态的构建script元素的方式来加载。

xml 代码
 
  1. <html>     
  2. <head>     
  3. <style type="text/css">    
  4. #map{     
  5. height: 75%;     
  6. width: 100%;     
  7. }     
  8. </style>     
  9. <script type="text/javascript">     
  10.     var YAHOO=window.YAHOO||{};      
  11.         YAHOO.namespace=function(_1){ if(!_1||!_1.length){ return null; }      
  12.         var _2=_1.split(".");      
  13.         var _3=YAHOO;      
  14.         for(var i=(_2[0]=="YAHOO")?1:0;i<_2.length;++i){ _3[_2[i]]=_3[_2[i]]||{}; _3_3=_3[_2[i]]; } return _3; };      
  15.         YAHOO.namespace("util");      
  16.         YAHOO.namespace("widget");      
  17.         YAHOO.namespace("example");      
  18.         var YMAPPID = "YahooDemo";      
  19. </script>     
  20. </head>     
  21. <body id="body">     
  22. <div id="map"></div>     
  23.     
  24. <script type="text/javascript">     
  25.     function loadYMap() {     
  26.         loadByScript('http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.1-b2.js');     
  27.         loadByScript('http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b2.js');     
  28.         loadByScript('http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dragdrop_2.0.1-b4.js');     
  29.         loadByScript('http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/animation_2.0.1-b2.js');     
  30.         loadByScript('http://us.js2.yimg.com/us.js.yimg.com/lib/map/js/api/ymapapi_3_7_1_11.js');     
  31.              
  32.         displayMap();     
  33.     }     
  34.          
  35.     function displayMap() {     
  36.         if (window.YMap) {     
  37.             // Create a map object     
  38.     var map = new YMap(document.getElementById('map'));     
  39.     
  40.     // Add map type control     
  41.     map.addTypeControl();     
  42.     
  43.     // Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG     
  44.     map.setMapType(YAHOO_MAP_SAT);     
  45.     
  46.     // Display the map centered on a geocoded location     
  47.     map.drawZoomAndCenter("San Francisco", 3);     
  48.         }     
  49.         else {     
  50.             setTimeout(displayMap, 200);     
  51.         }     
  52.     }     
  53.     
  54.     function loadByScript(url) {     
  55.         var script = document.createElement("script");     
  56.         script.setAttribute("type", "text/javascript");     
  57.         script.src = url;     
  58.         var body = document.getElementById("body");     
  59.         body.appendChild(script);     
  60.     }     
  61. </script>     
  62. <p>     
  63. <input type="button" value="Load..." onclick="loadYMap();"></input>     
  64. </p>     
  65. </body>     
  66. </html>   



上面的页面只有在点击了Load...按钮的时候才会去加载Yahoo! Map的javascript文件，并把地图显示出来。
分享到：
| Latex语法参考卡片
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics