Загрузка всплывающего содержимого при загрузке страницы вместо открытия всплывающего окна (MapBox, Leaflet) - PullRequest
Новая
       21

Загрузка всплывающего содержимого при загрузке страницы вместо открытия всплывающего окна (MapBox, Leaflet)

0 голосов
/ 07 ноября 2018

Я использую API-интерфейс Leaflet mapbox для разработки веб-страницы.

В моих всплывающих окнах есть контент, загрузка которого занимает много времени (твиттеры, видео на YouTube, содержимое страниц блога и т. Д.). Есть ли способ предварительно загрузить эту информацию, чтобы она загружалась не при каждом открытии всплывающего окна, а в начале загрузки всей страницы?

Вот как я связываю свое всплывающее окно и открываю его в данный момент: 

var myLayer = L.mapbox.featureLayer().addTo(mymap);

myLayer.on('layeradd', function(e) {
  var marker = e.layer,
      feature = marker.feature;
    marker.setIcon(L.icon(feature.properties.icon));
  var popupContent = feature.properties.html;
  marker.bindPopup(popupContent, {
    closeButton: false,
    midWidth: 230
  });
});

myLayer.setGeoJSON(geoJson);

GeoJson I, привязанный к всплывающему окну (определенный выше, предыдущий код): 

var geoJson = {
    features: [{
        type: 'Feature',
        properties: {
            html: '<iframe width="320" height="180" src="https://www.youtube.com/embed/f4OcphBbknU" width="380" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://www.youtube.com/watch?v=f4OcphBbknU&feature=youtu.be"><h2>How to wrap your hands</h2><p>Eddie Roa</a> from <a href="http://www.pacifictrainingcenter.com/"">Pacific Training Center</a>.</p>',
            icon: {
              iconUrl: 'images/waterdrop_single.png',
              iconSize: [50, 50], // size of the icon
              iconAnchor: [25, 25], // point of the icon which will correspond to marker's location
              popupAnchor: [0, -25], // point from which the popup should open relative to the iconAnchor
              className: 'dot'
            }
        },
        geometry: {
            type: 'Point',
            coordinates: [101,11]
        }
    },
    {
        type: 'Feature',
        properties: {
          html: timelineHtml,
        icon: {
          iconUrl: 'images/waterdrop_single.png',
          iconSize: [75, 75], // size of the icon
          iconAnchor: [25, 25], // point of the icon which will correspond to marker's location
          popupAnchor: [0, -25], // point from which the popup should open relative to the iconAnchor
          className: 'dot'
        }
    },
        geometry: {
            type: 'Point',
            coordinates: [95,11]
        }
    },
    {
        type: 'Feature',
        properties: {
        html: '<a class="twitter-timeline" data-width="300" data-height="500" href="https://twitter.com/milkblitz?ref_src=twsrc%5Etfw">Tweets by milkblitz</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>',
        icon: {
          iconUrl: 'images/muaythai_pose1.svg',
          iconSize: [100, 100], // size of the icon
          iconAnchor: [25, 25], // point of the icon which will correspond to marker's location
          popupAnchor: [0, -25], // point from which the popup should open relative to the iconAnchor
          className: 'dot'
        }
    },
        geometry: {
            type: 'Point',
            coordinates: [102,12]
        }
    },
    {
        type: 'Feature',
        properties: {
        html: '<iframe src ="https://muay-thai-guy.com/blog" width="500" height="500"><p>Your browser does not support iFrames.</p></iframe>',
        icon: {
          iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png',
          iconSize: [50, 50], // size of the icon
          iconAnchor: [25, 25], // point of the icon which will correspond to marker's location
          popupAnchor: [0, -25], // point from which the popup should open relative to the iconAnchor
          className: 'dot'
        }
    },
      geometry: {
          type: 'Point',
          coordinates: [95,15]
      }
    },
  ]
};

При открытии всплывающего окна у меня происходит еще пара вещей (вызов скрипта для показа ленты в Твиттере и центрирование карты по нажатой точке). 

mymap.on('popupopen', function(e) {
  $.getScript("https://platform.twitter.com/widgets.js");
  var px = mymap.project(e.popup._latlng);
  px.y -= e.popup._container.clientHeight/2;
  mymap.panTo(mymap.unproject(px), {animate: true});
})
...