删除谷歌地图的渲染阻塞 JavaScript
-
13-12-2019 - |
题
PageSpeed Insights 向我展示了我要删除谷歌地图 js 的渲染阻塞。它被添加到cms内容中,这是代码:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myipcode">// <![CDATA[
// ]]></script>
<script type="text/javascript">// <![CDATA[
function initialize() {
var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
var mapOptions = {
zoom: 17,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Title'
});
}
google.maps.event.addDomListener(窗口, '加载', 初始化);// ]]>
如果我添加 async="async"
到 地图未加载,但来自页面速度的消息消失。我应该怎么办 ?
解决方案
尝试以下操作
<div id="map"></div>
<script type="text/javascript">
function initializeMap() {
var myLatlng = new google.maps.LatLng(mycoord1, mycoord2);
var mapOptions = {
zoom: 17,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Title'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myipcode&callback=initializeMap"
async defer></script>
将外部脚本标记放置在其余部分之后至关重要,这样它就有了可以回调的内容。另外,使用异步意味着您必须添加一个回调方法以使其初始化。
我建议不要 initialize
作为方法名称,因为它非常通用并且可能在其他地方使用