當它們進入視口時延遲加載 map

Question

我試圖加載一個谷歌 Map 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

你的方法還可以。 為簡單起見，您可以使用google js api的<script async> ，省略loadScript函數。

但。 延遲加載通常意味着“按需加載”，因此，正如您所說，例如，當地圖將進入視口時，而您的loadScript在頁面加載后立即被調用。 有圖書館，例如航點一，或者滾動監視器 ，或者你自己做。 無論哪種方式， loadScript然后再次使用。

Answer 2

我一直在尋找這個問題的答案，我最終創建了這個解決方案：

var googleMapLoaded = false;
$(window).on('scroll', function(){
    if(googleMapLoaded === false && $(window).scrollTop() > $('#map').position().top - $(window).height()) {
        googleMapLoaded = true;
        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);
    }
});

Answer 3

這是我在 vanilla js 上的工作示例，從 Bandi 答案中重新設計。

var googleMapLoaded = false;
window.addEventListener('scroll', function(){
    if (googleMapLoaded === false && 
           window.scrollY > document.querySelector('#map').getBoundingClientRect().top - window.innerHeight) {
        googleMapLoaded = true;
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//maps.googleapis.com/maps/api/js?key=XXXXX&callback=initMap';
        document.body.appendChild(script);
    }
});