Ленивая карта загрузки, когда они входят в область просмотра

Question

Я пытаюсь загрузить карту 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;

Я хотел бы иметьВаше мнение о том, как это сделать, и о возможных улучшениях, если это возможно.

Заранее благодарю

Answer 1

Ваш подход в порядке. для простоты вы можете сделать то же самое с <script async> из google js api, опуская функцию loadScript.

но. Ленивая загрузка обычно означает «загрузку по требованию», например, как вы говорите, например, когда карта попадет в область просмотра, тогда как ваш loadScript вызывается сразу после загрузки страницы. Есть библиотеки, например, waypoints one или scrollmonitor , или вы делаете это самостоятельно. в любом случае, loadScript затем снова пригодится.