title: Loading map in leaflet is very slow
body: <p>I have a map in leaflet,using the following code,when the page load, the map doesn't completely been shown,i don't know why, how can this be solved?</p>
  
  <pre><code>var Mmap = L.map('Modalmap').setView([8.7144, 125.7481],8);
  L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;&lt;/a&gt;',
      subdomains: ['a','b','c']
  }).addTo(Mmap);
  
  L.control.scale({imperial:false}).addTo(Mmap);
  
  var north = L.control({position: "topleft"});
  north.onAdd = function(map) {
      var div = L.DomUtil.create("div", "info_legend leaflet-bar");
      div.innerHTML = '&lt;img src="../lib/css/images/north-arrow-2.png" width="100%" height="100%"&gt;';
      return div;
  }
  north.addTo(Mmap);
  
  var geocoder = L.Control.geocoder({
      defaultMarkGeocode: false
  })
  .on('markgeocode', function(e) {
      var box = e.geocode.center;
      document.getElementById("Latitude").value = box.lat;
      document.getElementById("Longitude").value = box.lng;
      var MarkLayer=L.marker([box.lat,box.lng]).addTo(Mmap);
      var group = new L.featureGroup([MarkLayer]);
  
      Mmap.fitBounds(group.getBounds());
  }).addTo(Mmap);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/QYrk2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QYrk2.png" alt="enter image description here"></a></p>
  
  <p>This map is in a modal which i am calling it <code>Modal-1</code> from a navbar</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
      &lt;ul class="nav navbar-nav" style="margin-top: -3px;"&gt;
          &lt;li class="dropdown"&gt;&lt;a href="#" data-toggle="modal" data-target="#modal-1"&gt;New Customer&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;&lt;a href="#" data-toggle="modal" data-target="#modal-2"&gt;New Category&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>