Preload Tiles

Example of tile preloading.

The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.

<!DOCTYPE html>
<html>
  <head>
    <title>Preload Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map1" class="map"></div>
    <div id="map2" class="map"></div>
    <script>
      var view = new ol.View({
        center: [-4808600, -2620936],
        zoom: 8
      });

      var map1 = new ol.Map({
        layers: [
          new ol.layer.Tile({
            preload: Infinity,
            source: new ol.source.BingMaps({
              key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
              imagerySet: 'Aerial'
            })
          })
        ],
        target: 'map1',
        view: view
      });

      var map2 = new ol.Map({
        layers: [
          new ol.layer.Tile({
            preload: 0, // default value
            source: new ol.source.BingMaps({
              key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here',
              imagerySet: 'AerialWithLabels'
            })
          })
        ],
        target: 'map2',
        view: view
      });
    </script>
  </body>
</html>