`
alexcheng
  • 浏览: 181686 次
  • 性别: 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语法参考卡片
评论
发表评论

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

相关推荐

    图片延迟加载 lazyload

    此外，对于视口内的图片，可以通过预加载技术提前加载，避免用户滚动到该位置时出现明显的加载延迟。 通过合理应用图片延迟加载技术，可以有效改善网页性能，尤其是对于内容丰富的网站和移动设备，这种优化显得尤为...

    lazyload延迟加载

    Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。 网上也有不少类似的效果，这个Lazyload主要特点是： 支持使用window（窗口）或元素作为容器对象； 对静态（位置大小不变）元素做了大量...

    网页内容延迟加载LazyLoad

    网页内容延迟加载（LazyLoad）是一种优化网页性能的技术，它主要应用于图片、视频或大量文本内容的加载。这种技术的核心思想是，只加载用户当前视口内的内容，当用户滚动页面，即将进入视口的内容才会被加载。这样...

    mybatis延迟加载样例

    在实际开发中，为了提高性能和减少内存消耗，MyBatis提供了延迟加载（Lazy Loading）功能。延迟加载允许我们在真正需要数据时才去加载关联的对象，而不是在查询主对象时一次性加载所有关联数据。 标题中的“mybatis...

    C#使用Lazy延迟加载

    这个类主要用于实现延迟加载（Lazy Loading），它允许我们推迟对象的初始化，直到真正需要使用该对象时才会执行初始化过程。这种方式在处理大数据集合或者复杂对象时尤其有用，因为它可以避免在不必要时消耗宝贵的...

    图片延迟加载，lazyload.js使用实例

    图片延迟加载（Lazy Load）是一种优化网页性能的技术，它通过只加载用户当前视口内的图片，而将其他未显示的图片推迟到用户滚动到相应位置时再加载，从而减少了页面初次加载的时间，提升了用户体验。在网页设计中，...

    jquery图片延迟加载

    2. **预加载策略**：对于重要图片，比如页面顶部的大图，可以考虑在页面加载时就进行预加载，防止用户在滚动时出现明显的加载延迟。 3. **动画效果**：加载图片时，可以添加过渡效果，比如淡入、渐显，提升用户体验...

    页面延迟加载JS包 lazyload.js scrollloading.js

    1. **什么是页面延迟加载（Lazy Loading）？** 页面延迟加载，也称为懒加载，是一种优化策略，主要用于图像、视频和脚本等网页元素。它不一次性加载所有内容，而是仅在用户滚动到可视区域时才加载相应的元素。这样...

    Hibernate lazy延迟加载

    在Java的持久化框架Hibernate中，懒加载（Lazy Loading）是一种重要的优化策略，它的核心思想是“延迟加载”或“按需加载”。默认情况下，当一个实体被加载时，并不会立即加载其关联的对象或集合，而是在真正需要...

    LazyLoad 延迟加载(按需加载)

    《延迟加载（LazyLoad）：优化网页性能的关键技术》 在当今互联网时代，大型网站面临着一个挑战：如何在满足用户体验的同时，尽可能减少服务器资源的消耗。延迟加载（LazyLoad），也称为按需加载，就是为解决这一...

    jquery Loading图片延迟加载特效.zip

    这种技术通常被称为“懒加载”（Lazy Loading）。在标题“jquery Loading图片延迟加载特效.zip”中，我们可以理解这是一款基于jQuery实现的图片延迟加载插件或库，它包含了一个用于展示滚动页面时图片逐步加载的特效...

    延迟加载js代码下载(包括页面延迟加载以及图片延迟加载)

    延迟加载，也称为懒加载（Lazy Loading），是指在需要时才加载资源的技术。这种技术主要用于减少初始页面加载的时间，特别是对于那些大型网站和含有大量图片的页面。延迟加载的主要思想是，只有当用户滚动到特定元素...

    图片延迟加载的jq

    jQuery.lazyload则是一个基于jQuery的插件，专门用于实现图片延迟加载。 **一、jQuery.lazyload的基本原理** jQuery.lazyload的工作原理是监听滚动事件，当用户滚动页面，即将或已经看到图片时，才开始加载图片。...

    JQuery 图片延迟加载 lazyload

    JQuery 图片延迟加载 lazyload

    LazyLoad类库 js 延迟加载工具

    **延迟加载（LazyLoad）技术概述** 延迟加载是一种优化网页性能的策略，它允许我们只在需要时才加载资源，如图片、JavaScript或CSS。这种技术显著减少了初始页面加载时间，提高了用户体验，尤其是在移动设备上，...

    js lazyload实现网页图片延迟加载特效

    在网页设计中，为了提高页面加载速度和优化用户体验，一种常见的技术是图片延迟加载，也称为懒加载（Lazy Load）。JavaScript 是实现这一功能的主要工具，它允许我们在用户滚动到图片时才加载图片，而不是一次性加载...

    延迟加载 html优化

    "延迟加载"（Lazy Loading）技术就是一种有效的HTML优化策略，它旨在减少页面初次加载时的数据量，提高页面的响应速度，进而改善用户的浏览体验。延迟加载的核心思想是只在用户需要时才加载图像或其他资源，而不是一...

    jquery.lazyload 实现图片延迟加载

    延迟加载（Lazy Loading）是指仅加载用户可视区域内的资源，当用户滚动页面时，浏览器才会加载即将进入视口的图片或其它资源。这种技术可以显著提高网页的加载速度，特别是对于包含大量图片的页面，可以避免一次性...

    Mybatis延迟加载和缓存

    本篇将深入探讨 Mybatis 的两个重要特性：延迟加载（Lazy Loading）和缓存机制。 ### 延迟加载（Lazy Loading） 延迟加载是一种优化策略，它的核心思想是不立即加载所有数据，而是在实际需要时才进行加载。在 ...

    页面图片实现Lazyload 延迟加载效果

    页面图片的延迟加载，也称为懒加载（Lazy Load），是一种优化网页性能的技术。它通过只在用户滚动到图片所在位置时才加载图片，而非一次性加载所有图片，从而减少了初次加载页面所需的时间，提升了用户体验，特别是...

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