Question

我正在使用jQuery Lazy Load XT插件来延迟加载我的google-map iframe data-src。

工作正常。

在这里演示：http://ressio.github.io/lazy-load-xt/demo/widget-iframe.htm

但是我需要在加载地图时添加一个微调器。您可以通过将微调器css文件包含到站点中来轻松完成此操作：https://github.com/ressio/lazy-load-xt/#spinner

但问题是：当地图开始加载时，微调器会显示，然后在加载地图时消失。

那么，如何在地图完全加载之前显示微调器？我不希望微调器显示2秒，然后消失，并看到一个空的iFrame，直到地图被完全加载。

Answer 1

实现微调器和放大器的jQuery插件延迟加载地图：

(function( $ ){

 $.fn.lazyMapLoad = function(opts) {
    var defaults={
                  center:{lat:0,lng:0},
                  zoom:1,
                  //style used to show the spinner
                  'style':{background:"url('http://ressio.github.io/lazy-load-xt/dist/loading.gif') center center no-repeat" }

                 },
      maps=this;

    //callback for API-load
    window.lazyMapLoadInit=function(){

      $.each($.unique($('head').data('maps')),function(i,o){
        $(o).trigger('lazyMapLoad.load');
      });
      delete window.lazyMapLoadInit;
    };

    maps.each(function() {
      var that=$(this),
        //collect properties for Maps-instance
        props=$.extend({},defaults,opts,that.data('map'));

        //create map-container
        that.empty().css(props.style).append($('<div></div>').css({height:'100%',opacity:0}))

        //when the map should be loaded
        that.on('lazyMapLoad.load',function(){

            //API not available yet, push the map to the stack
            if(!window.google || !window.google.maps || !window.google.maps.Map){
              var maps=$('head').data('maps')||[];
              maps.push(this);
              $('head').data('maps',$.unique(maps))
            } 

            //load the API
            if(!window.google || !window.google.maps){             
              window.google={maps:{}};
              $('<script/>',
                {src:'https://maps.googleapis.com/maps/api/js?v=3&callback=lazyMapLoadInit'})
                .appendTo('head');
            }
            //API available, load the map
            if(window.google && window.google.maps && window.google.maps.Map){
             that.off('lazyMapLoad.load');
             var data=that.data('map')||{};
                 data.map=new google.maps.Map(this.firstChild,props);
                 that.data('map',data);
                 google.maps.event.addListener(data.map,'tilesloaded',function(){
                  $(this.getDiv()).animate({opacity:1});
                 });
            }
        });
  });

  //observe scroll
  $(window).on('scroll',function (){
      //no maps to proceed
      if(!maps.length)return;

      var _maps=maps,
          offset=$(this).scrollTop()+$(this).height();

      //compare the position of each map
      maps.each(function(i,o){
        if(offset>=$(o).offset().top){
          $(o).trigger('lazyMapLoad.load');
          _maps=_maps.not(o);
        }
      });

      maps=_maps;

  }).trigger('scroll');

  return this;
}
} ( jQuery ));

用法：

$('selector').lazyMapLoad();

google.maps.Map-instance的选项将来自：

默认设置{center:{lat:0,lng:0},zoom:1}
调用插件时作为参数传递的选项
特定元素的data-map - 属性

演示：http://jsfiddle.net/doktormolle/bj6u0ncj/

显示loading-spinner直到google-map完全加载

1 个答案: