Javascript 当它们进入视口时延迟加载贴图

我试图仅当Google地图显示在视口中时才加载它

我听说过很多关于“延迟加载”原则的内容，但我必须承认我是从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;

函数initMap（）{
var loc={lat:45.764043，lng:4.83565899994}；
var map=new google.maps.map（document.getElementById（'map'）{
中心：loc
});
var bounds=new google.maps.LatLngBounds（）；
var坐标=document.getElementsByClassName（'datajson'）；
对于（变量i=0；i

如果可能的话，我想听听你对方法和可能的改进的意见

---

我提前谢谢你

你的方法还可以。为了简单起见，您也可以使用googlejsapi的

，省略

loadScript

函数

---

但是。延迟加载通常意味着“按需加载”，例如，正如您所说，当地图进入视口时，而您的

loadScript

在页面加载后立即被调用。有一些库，例如一个，或者，或者你自己做的。无论哪种方式，

loadScript

都是有用的。

你在手机上缺少了什么？事实上，我希望只有当我到达卡片时，只有当用户在屏幕上看到卡片时，才加载它。那么，我的答案应该是接受的；-）事实上，多亏了你的回答，我成功了，我也感谢你；-）