懒惰加载地图,当他们进入视口

前端之家收集整理的这篇文章主要介绍了懒惰加载地图,当他们进入视口 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试仅在视口中显示Google Map地图时加载它.

我已经听到很多有关“延迟加载”原理的信息,但是我必须承认我是从@L_404_0@开始的.

我的代码可以在桌面上完美运行,但我希望我的移动网站更好.

这是我的代码

        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.有一些库,例如waypointsscrollmonitor,或者您自己做.无论哪种方式,loadScript都可以使用.

原文链接:https://www.f2er.com/js/531212.html

猜你在找的JavaScript相关文章