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

Question

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

关于"lazy loading"原则我听了很多，但我必须承认我是从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 函数。

但是。延迟加载通常意味着 "loading on demand"，因此，正如您所说，例如当地图进入视口时，而您的 loadScript 在页面加载后立即被调用。有库，例如 waypoints one, or scrollmonitor，或者你自己做。无论哪种方式，loadScript then again is the use.

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);
    }
});

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

Lazy load map when they come into the viewport

javascript

lazy-loading

viewport