From 1de3ce7e19557b64d24a1e7affb4bbd274f5b20b Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Sat, 19 Mar 2022 10:34:29 +0100 Subject: [PATCH] Simplify tile and image load events examples --- examples/image-load-events.html | 6 +++-- examples/image-load-events.js | 40 +++++++++++++-------------------- examples/tile-load-events.html | 4 +++- examples/tile-load-events.js | 40 +++++++++++++-------------------- 4 files changed, 37 insertions(+), 53 deletions(-) diff --git a/examples/image-load-events.html b/examples/image-load-events.html index 94bc19ad8c..0b4927239f 100644 --- a/examples/image-load-events.html +++ b/examples/image-load-events.html @@ -3,11 +3,13 @@ layout: example.html title: Image Load Events shortdesc: Example using image load events. docs: > -

Image sources fire events related to image loading. You can + Image sources fire events related to image loading. You can listen for imageloadstart, imageloadend, and imageloaderror 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.

+ renders an image loading progress bar at the bottom of the map. The + progress bar is shown and hidden according to the map's loadstart + and loadend events. tags: "image, events, loading" ---
diff --git a/examples/image-load-events.js b/examples/image-load-events.js index cdfa74eda2..5b13b7ece9 100644 --- a/examples/image-load-events.js +++ b/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; - setTimeout(function () { - ++this_.loaded; - this_.update(); - }, 100); + ++this.loaded; + this.update(); }; /** @@ -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) { - this.el.style.visibility = 'hidden'; - this.el.style.width = 0; - } + const style = this.el.style; + setTimeout(function () { + 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', function () { - progress.addLoaded(); -}); -source.on('imageloaderror', function () { +source.on(['imageloadend', '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(); +}); diff --git a/examples/tile-load-events.html b/examples/tile-load-events.html index 821dd4967e..a640324d62 100644 --- a/examples/tile-load-events.html +++ b/examples/tile-load-events.html @@ -7,7 +7,9 @@ docs: > listen for tileloadstart, tileloadend, and tileloaderror 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.

+ renders a tile loading progress bar at the bottom of the map. The + progress bar is shown and hidden according to the map's loadstart + and loadend events. tags: "tile, events, loading" cloak: - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2t0cGdwMHVnMGdlbzMxbDhwazBic2xrNSJ9.WbcTL9uj8JPAsnT9mgb7oQ diff --git a/examples/tile-load-events.js b/examples/tile-load-events.js index b7c29233bb..25d3eb05aa 100644 --- a/examples/tile-load-events.js +++ b/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; - setTimeout(function () { - ++this_.loaded; - this_.update(); - }, 100); + ++this.loaded; + this.update(); }; /** @@ -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) { - this.el.style.visibility = 'hidden'; - this.el.style.width = 0; - } + const style = this.el.style; + setTimeout(function () { + 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', function () { - progress.addLoaded(); -}); -source.on('tileloaderror', function () { +source.on(['tileloadend', '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(); +});