使用延迟加载加速谷歌地图 - 异步谷歌地图

版本:

浏览量:1355

最后更新：2021-09-12

应用标签：Jquery插件 MAC 软件 git

推荐指数:

查看演示点击下载

详细信息

一个简单的 JavaScript 解决方案，使 Google 地图加载速度更快并改善页面加载体验。

Async Google Maps jQuery 插件推迟加载 Google 地图（通过 iframe 嵌入您的页面），直到它滚动到视图中。

如何使用它：

1. 加载最新的 jQuery 库后加载 Async Google Maps 插件的 JavaScript。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/async-google-<a href="https://www.jqueryscript.net/tags.php?/map/">map</a>s.js"></script>

2.如果你需要在加载谷歌地图时显示加载指示器，请加载以下CSS。

<!-- Default Loading Indicator -->
<link href="css/async-google-maps.css" rel="stylesheet" />
<!-- Loading.io Loading Indicator -->
<link href="css/async-google-maps-cl.css" rel="stylesheet" />
<!-- CSS-Loader Loading Indicator -->
<link href="css/async-google-maps-lio.css" rel="stylesheet" />
<!-- All In One -->
<link href="css/async-google-maps-all.css" rel="stylesheet" />

3. 通过 iframe 将 Google 地图嵌入到您的网页中。请注意，您必须将 Google 地图 URL 插入到data-src属性中：

<iframe class="g-maps"
        data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.9147706511!2d-74.1197632417694!3d40.6974034421145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY!5e0!3m2!1sen!2sus!4v1585882901950!5m2!1sen!2sus"
        width="600"
        height="450"
        frameborder="0">
</iframe>

4. 将函数 asyncGoogleMaps 附加到 Google Map iframe 并完成。

$('.g-maps').asyncGoogleMaps();

5.加载时在谷歌地图的父容器中显示加载指示器。

// default loading indicator
$('.g-maps').asyncGoogleMaps({
  spinner: {
    attach: true,
    remove: true
  }
});
 
// use <a href="https://www.jqueryscript.net/tags.php?/bootstrap 4/"></a><a href="https://www.jqueryscript.net/tags.php?/Bootstrap/">Bootstrap</a> 4 loading spinner
$('.g-maps').asyncGoogleMaps({
  spinner: {
    attach: true,
    remove: true,
    type: 'bootstrap',
    bsSpinnerClass: 'spinner-grow'
  }
});
 
// or use a custom loading spinner
$('.g-maps').asyncGoogleMaps({
  spinner: {
    attach: true,
    remove: true,
    type: 'custom',
    customSpinner: 'Your Loading Spinner HTML',
    delay: 5000
  }
});

6、开启fixHeight选项，防止页面跳转。

$('.g-maps').asyncGoogleMaps({
  fixHeight: true
});

7. 确定开始加载谷歌地图的偏移量。默认值：0。

$('.g-maps').asyncGoogleMaps({
  offset: -100
});

8. 自定义功能。

$('.g-maps').asyncGoogleMaps({
  // determine if container is in viewport - can be user customized
  isInViewport: function (opts) {
 
    // container bounds
    var containerTop = $(this).offset().top;
    var containerBottom = containerTop + $(this).outerHeight();
 
    // viewport bounds
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
 
    // detect if container is in viewport
    return containerBottom > viewportTop && containerTop + opts.offset < viewportBottom;
  },
 
  // automatically attach inline min-height to prevent reflow - can be user customized
  setHeight: function(opts) {
 
    // only if height should be fixed inline
    if(opts.fixHeight) {
 
        // iterate over all map containers
        $(opts.containers).each(function () {
             
            var height = $(this).attr('height');
            if(typeof height !== 'undefined') {
                $(this).attr('style', 'min-height:' + height + 'px;');
            }
        });
    }
  },
 
  // remove a predefined spinner from the parent container of the map - can be user customized
  removeSpinner: function(opts) {
 
    // remove spinner within parent container
    var hFunc = function() {
        $(this).parent().find('.' + opts.spinner.spinnerClass).remove();
    };
 
    // wait a specific time in milliseconds before removing spinner
    setTimeout(hFunc.bind(this), opts.spinner.delay);
  },
 
  // attach a predefined spinner to the parent container of the map - can be user customized
  attachSpinner: function(opts) {
    var spinner = opts.spinner;
    var $spinnerDiv;
 
    // if spinner should be attached
    if(spinner.attach) {
 
        // iterate over all map containers
        $(opts.containers).each(function () {
 
            // create bootstrap spinner
            if(spinner.type == 'bootstrap') {
 
                // create spinner container
                $spinnerDiv = $('<div>').addClass(spinner.bsSpinnerClass + ' ' + spinner.spinnerClass).attr('role', 'status');
                $spinnerDiv.prepend($('<span>').addClass('sr-only').html('Loading...'));
 
            // create included spinner
            }else if(spinner.type == 'included') {
 
                // create spinner container
                $spinnerDiv = $('<div>').addClass('simple-spinner' + ' ' + spinner.spinnerClass).attr('role', 'status');
 
            // create custom spinner
            }else if (spinner.type == 'custom') {
 
                // create custom spinner element by passed HTML
                $spinnerDiv = $(spinner.customSpinner).addClass(spinner.spinnerClass);
            }
 
            // prepend spinner to parent container
            $(this).parent().prepend($spinnerDiv);
        });
    }
  },
 
  // append trigger event - can be user customized
  triggerAsyncLoad: function (opts) {
    $(window).on('resize scroll', function() { opts.checkAndLoad(opts) });
  },
 
  // check and load map(s) - can be user customized
  checkAndLoad: function(opts) { checkAndLoadMaps(opts) },
 
  // before load initiated - can be user customized
  beforeLoad: function(opts) {},
 
  // after load initiated - can be user customized
  afterLoad: function(opts) {}
   
});