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

我就是我 2023-10-18 10:10 191阅读 0赞

通常使用Yahoo! Map的时候，是采用其网站提供的方法：

js 代码

1.  <script type="</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文件，并把地图显示出来。