在页面加载时加载弹出内容，而不是打开弹出窗口（MapBox，Leaflet）

Question

我正在使用Leaflet mapbox api开发网页。

我的弹出窗口中有一些内容需要花费很长时间才能加载（Twitter提要，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（在上面的代码上方定义）：

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]
      }
    },
  ]
};

打开弹出窗口时，我还有其他事情（调用脚本以显示Twitter feed，并将地图集中在单击的点上）。

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