我试图仅在视口中显示Google Map地图时加载它。
我已经听到很多有关“延迟加载”原理的信息,但是我必须承认我是从javascript开始的。
我的代码可以在台式机上完美运行,但是我希望我的移动网站更好。
这是我的代码:
function initMap() {
var loc = {lat: 45.764043, lng: 4.835658999999964};
var map = new google.maps.Map(document.getElementById('map'), {
center: loc
});
var bounds = new google.maps.LatLngBounds();
var coordinate = document.getElementsByClassName('datajson');
for (var i = 0; i < coordinate.length; i++) {
(function (index) {
var elements = JSON.parse(coordinate[i].value);
var localisation={lat: elements.latitude, lng: elements.longitude};
var marker = new google.maps.Marker({
position:localisation,
map: map
});
bounds.extend(localisation);
})(i);
}
map.setCenter(bounds.getCenter());
map.setZoom(10);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key=XXXXX&'+'callback=initMap';
document.body.appendChild(script);
}
window.onload = loadScript;
我想对您的工作方式和可能的改进发表意见。
我先谢谢你
答案 0 :(得分:1)
您的方法还可以。为简单起见,您可以使用split(string(add(mul(int(60),sub(mul(variables('time_decimal'),int(24)),float(variables('hours')))),float(0.00000001))),'.')[0]
的google js api来执行相同的操作,而忽略<script async>
函数。
但是。延迟加载通常表示“按需加载”,因此,正如您所说的,例如,地图何时将进入视口,而loadScript
则在页面加载后立即调用。有一些库,例如waypoints或scrollmonitor,或者您自己做。无论哪种方式,loadScript
都可以使用。