Tag Archives: google maps

解决google maps api阻塞页面渲染的问题

google maps的api使用很方便,只要在用使用google maps的页面引入http://maps.google.com/maps/api/js?sensor=false就可以了。 但是在项目中这样使用后,发现domReady事件被严重阻塞(甚至会延迟十几秒) 因为domReady只有页面中所有的script都运行完后才会触发,而google的服务器往往很慢……直接用script标签来加入这个壳,会使domReady变得不可控。 为了防止阻塞domReady,对于不是必须在渲染前执行的js代码,一般使用document.createElement创建script标签,这样浏览器会在domReady后再下载这些script并执行。我一般使用这样的代码: $.loadJs = function ( src ) { var script = document.createElement( ‘script’ ); script.type = ‘text/javascript’; script.src = src; document.body.appendChild( script ); } 在使用$.loadJs加载http://maps.google.com/maps/api/js?sensor=false后,domReady正常了,但是google maps却不能正常使用了。 审查元素发现,壳虽然被引入了,但是依赖的子模块都没有引入进来,于是我们检查壳里加载子模块的代码: window.google = window.google || {}; google.maps = google.maps … Continue reading

Posted in IT技术, Javascript | Tagged | Leave a comment