CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

Image Load Events(图像加载事件)

发布时间:『 2017-07-05 16:44』  博客类别:WEB前端  阅读(1731) 评论(0)

现在淘宝、京东上都采用滑动加载、滚动加载图片功能。而且网上也有很多响应的插件。本文将介绍这些插件的实现原理。

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.

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

imageloadstart imageloadend imageloaderror图像加载事件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'));

      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>

如有不懂可以留言!


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   imageloadstart     imageloadend     imageloaderror     图像加载事件  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有