Simplify tile and image load events examples

examples/image-load-events.html

@@ -3,11 +3,13 @@ layout: example.html
 title: Image Load Events
 shortdesc: Example using image load events.
 docs: >
-  <p>Image sources fire events related to image loading.  You can
+  Image sources fire events related to image loading.  You can
   listen for <code>imageloadstart</code>, <code>imageloadend</code>,
   and <code>imageloaderror</code> type events to monitor image loading
   progress.  This example registers listeners for these events and
-  renders an image loading progress bar at the bottom of the map.</p>
+  renders an image loading progress bar at the bottom of the map. The
+  progress bar is shown and hidden according to the map's <code>loadstart</code>
+  and <code>loadend</code> events.
 tags: "image, events, loading"
 ---
 <div class="wrapper">

examples/image-load-events.js

@@ -18,9 +18,6 @@ function Progress(el) {
  * Increment the count of loading tiles.
  */
 Progress.prototype.addLoading = function () {
-  if (this.loading === 0) {
-    this.show();
-  }
   ++this.loading;
   this.update();
 };
@@ -29,11 +26,8 @@ Progress.prototype.addLoading = function () {
  * Increment the count of loaded tiles.
  */
 Progress.prototype.addLoaded = function () {
-  const this_ = this;
+  ++this.loaded;
-  setTimeout(function () {
+  this.update();
-    ++this_.loaded;
-    this_.update();
-  }, 100);
 };
 
 /**
@@ -42,14 +36,6 @@ Progress.prototype.addLoaded = function () {
 Progress.prototype.update = function () {
   const width = ((this.loaded / this.loading) * 100).toFixed(1) + '%';
   this.el.style.width = width;
-  if (this.loading === this.loaded) {
-    this.loading = 0;
-    this.loaded = 0;
-    const this_ = this;
-    setTimeout(function () {
-      this_.hide();
-    }, 500);
-  }
 };
 
 /**
@@ -63,10 +49,11 @@ Progress.prototype.show = function () {
  * Hide the progress bar.
  */
 Progress.prototype.hide = function () {
-  if (this.loading === this.loaded) {
+  const style = this.el.style;
-    this.el.style.visibility = 'hidden';
+  setTimeout(function () {
-    this.el.style.width = 0;
+    style.visibility = 'hidden';
-  }
+    style.width = 0;
+  }, 250);
 };
 
 const progress = new Progress(document.getElementById('progress'));
@@ -80,11 +67,7 @@ const source = new ImageWMS({
 source.on('imageloadstart', function () {
   progress.addLoading();
 });
-
+source.on(['imageloadend', 'imageloaderror'], function () {
-source.on('imageloadend', function () {
-  progress.addLoaded();
-});
-source.on('imageloaderror', function () {
   progress.addLoaded();
 });
 
@@ -96,3 +79,10 @@ const map = new Map({
     zoom: 4,
   }),
 });
+
+map.on('loadstart', function () {
+  progress.show();
+});
+map.on('loadend', function () {
+  progress.hide();
+});

examples/tile-load-events.html

@@ -7,7 +7,9 @@ docs: >
   listen for <code>tileloadstart</code>, <code>tileloadend</code>,
   and <code>tileloaderror</code> type events to monitor tile loading
   progress.  This example registers listeners for these events and
-  renders a tile loading progress bar at the bottom of the map.</p>
+  renders a tile loading progress bar at the bottom of the map. The
+  progress bar is shown and hidden according to the map's <code>loadstart</code>
+  and <code>loadend</code> events.
 tags: "tile, events, loading"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ

examples/tile-load-events.js

@@ -18,9 +18,6 @@ function Progress(el) {
  * Increment the count of loading tiles.
  */
 Progress.prototype.addLoading = function () {
-  if (this.loading === 0) {
-    this.show();
-  }
   ++this.loading;
   this.update();
 };
@@ -29,11 +26,8 @@ Progress.prototype.addLoading = function () {
  * Increment the count of loaded tiles.
  */
 Progress.prototype.addLoaded = function () {
-  const this_ = this;
+  ++this.loaded;
-  setTimeout(function () {
+  this.update();
-    ++this_.loaded;
-    this_.update();
-  }, 100);
 };
 
 /**
@@ -42,14 +36,6 @@ Progress.prototype.addLoaded = function () {
 Progress.prototype.update = function () {
   const width = ((this.loaded / this.loading) * 100).toFixed(1) + '%';
   this.el.style.width = width;
-  if (this.loading === this.loaded) {
-    this.loading = 0;
-    this.loaded = 0;
-    const this_ = this;
-    setTimeout(function () {
-      this_.hide();
-    }, 500);
-  }
 };
 
 /**
@@ -63,10 +49,11 @@ Progress.prototype.show = function () {
  * Hide the progress bar.
  */
 Progress.prototype.hide = function () {
-  if (this.loading === this.loaded) {
+  const style = this.el.style;
-    this.el.style.visibility = 'hidden';
+  setTimeout(function () {
-    this.el.style.width = 0;
+    style.visibility = 'hidden';
-  }
+    style.width = 0;
+  }, 250);
 };
 
 const progress = new Progress(document.getElementById('progress'));
@@ -85,11 +72,7 @@ const source = new XYZ({
 source.on('tileloadstart', function () {
   progress.addLoading();
 });
-
+source.on(['tileloadend', 'tileloaderror'], function () {
-source.on('tileloadend', function () {
-  progress.addLoaded();
-});
-source.on('tileloaderror', function () {
   progress.addLoaded();
 });
 
@@ -101,3 +84,10 @@ const map = new Map({
     zoom: 2,
   }),
 });
+
+map.on('loadstart', function () {
+  progress.show();
+});
+map.on('loadend', function () {
+  progress.hide();
+});