javascript - 当它们进入视口时延迟加载地图
问题描述
我试图仅在显示在视口上时才加载 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;
如果可能的话,我想听听你对如何做和可能的改进的意见。
我提前谢谢你
解决方案
你的方法没问题。为简单起见,您可以使用<script async>
google js api 执行相同操作,省略该loadScript
函数。
但。延迟加载通常意味着“按需加载”,因此,正如您所说,例如,当地图进入视口时,您loadScript
会在页面加载后立即调用。有图书馆,例如航点一,或scrollmonitor,或者你自己做。无论哪种方式,loadScript
然后再一次是有用的。
推荐阅读
- javascript - 导入 ES6 模块时,路径是相对于 HTML 文件还是相对于 JS 文件?
- amazon-web-services - 我们可以限制子 aws 帐户中的角色策略仅由组织 aws 帐户使用吗
- c# - Blazor 添加 HttpClientHandler 以在请求中将 Jwt 添加到 HTTP 标头
- flutter - 使用 CupertinoPageScaffold 实现 Drawer
- python - 我如何在管理页面中关闭 django 的复数符号
- linux - 使用 ansible 运行 db2relocatedb
- swift - 在 Swift 中访问 Flutter SharedPreferences
- nlp - 我应该在这种情况下使用 Spacy 命名实体识别吗?
- javascript - 背景颜色停止 this.props.navigation.goBack
- javascript - 基于对象数组形成组件