Image Load Events——图像加载事件

最新推荐文章于 2024-07-16 08:14:07 发布

桃李不言_下自成蹊

最新推荐文章于 2024-07-16 08:14:07 发布

阅读量2.8k

点赞数

分类专栏： OpenLayers3

OpenLayers3 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

本文深入探讨了HTML中图像加载事件的工作原理，包括`load`和`error`事件。了解如何监听这些事件，以优化页面渲染和处理图像加载失败的情况。通过实例代码，展示了如何在图片加载成功或失败时执行相应操作，提升用户体验。

摘要由CSDN通过智能技术生成

Image sources fire events related to image loading. You can listen forimageloadstart,imageloadend, andimageloaderror 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.

图像数据源触发与图像加载相关的事件。你可以监听imageloadstart、imageloadend和imageloaderror事件来监视图像加载的进程。这个例子为这些事件注册了监听器并在地图的底部渲染了一个图像加载进度条。
 
 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Image Load Events</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/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.2.0/build/ol.js"></script>
    <style>
      .map {
        background: #E0ECED;
      }
      .wrapper {
        position: relative;
      }
      #progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background: rgba(0, 60, 136, 0.4);
        width: 0;
        transition: width 250ms;
      }    </style>
  </head>
  <body>
    <div class="wrapper">
      <div id="map" class="map"></div>
      <div id="progress"></div>
    </div>
    <script>
      /**
       * Renders a progress bar.
       * 渲染一个进度条
       * @param {Element} el The target element.
       * @constructor
       */
      function Progress(el) {
        this.el = el;
        this.loading = 0;
        this.loaded = 0;
      }


      /**
       * Increment the count of loading tiles.
       * 加载瓦片时增加计数器
       */
      Progress.prototype.addLoading = function() {
        if (this.loading === 0) {
          this.show();
        }
        ++this.loading;
        this.update();
      };


      /**
       * Increment the count of loaded tiles.
       * 瓦片加载完毕时增加计数器
       */
      Progress.prototype.addLoaded = function() {
        var this_ = this;
        setTimeout(function() {
          ++this_.loaded;
          this_.update();
        }, 100);
      };


      /**
       * Update the progress bar.
       * 更新进度条
       */
      Progress.prototype.update = function() {
        var width = (this.loaded / this.loading * 100).toFixed(1) + '%';
        this.el.style.width = width;
        if (this.loading === this.loaded) {
          this.loading = 0;
          this.loaded = 0;
          var this_ = this;
          setTimeout(function() {
            this_.hide();
          }, 500);
        }
      };


      /**
       * Show the progress bar.
       * 显示进度条
       */
      Progress.prototype.show = function() {
        this.el.style.visibility = 'visible';
      };


      /**
       * Hide the progress bar.
       * 隐藏进度条
       */
      Progress.prototype.hide = function() {
        if (this.loading === this.loaded) {
          this.el.style.visibility = 'hidden';
          this.el.style.width = 0;
        }
      };

      // 创建进度条
      var progress = new Progress(document.getElementById('progress'));

      // ImageWMS数据源
      var source = new ol.source.ImageWMS({
        url: 'https://ahocevar.com/geoserver/wms',
        params: {'LAYERS': 'topp:states'},
        serverType: 'geoserver'
      });

      // 图像开始加载事件
      source.on('imageloadstart', function() {
        progress.addLoading();
      });

      // 图像加载完成事件
      source.on('imageloadend', function() {
        progress.addLoaded();
      });
      
      // 图像加载错误事件
      source.on('imageloaderror', function() {
        progress.addLoaded();
      });

      var map = new ol.Map({
        logo: false,
        layers: [
          new ol.layer.Image({source: source})
        ],
        target: 'map',
        view: new ol.View({
          center: [-10997148, 4569099],
          zoom: 4
        })
      });
    </script>
  </body>
</html>

桃李不言_下自成蹊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Image Load Events——图像加载事件

Image sources fire events related to image loading. You can listen forimageloadstart,imageloadend, andimageloaderror type events to monitor image loading progress. This example registers listene
复制链接

扫一扫

专栏目录