説明に次のようにあります。
Example using image load events.
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タイプのイベントをリッスンすることができます。この例では、これらのイベントのリスナを登録し、マップの下部にあるイメージロードプログレスバーをレンダリングします。
HTML ファイルの作成
b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.4.0」->「examples」->「image-load-events.html」をクリックして選択し、「OK」ボタンをクリックします。同じように「image-load-events.js」を開きます。
d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「2102-ol3ex.html」と入力し、「次へ」ボタンをクリックします。
f 「image-load-events.html」の内容をコピーして「2102-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2102-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「image-load-events.js」の内容をコピーして貼り付け、修正します。「image-load-events-require.js」も「2102-ol3ex-require.js」に貼り付けます。
「2102-ol3ex.html」
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!-- <link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> --> <!-- ディレクトリ修正 --> <link rel="stylesheet" href="v3.4.0/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.4.0/resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="v3.4.0/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.4.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Image load events example</title>
<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> <!-- bootstrap.min.css, bootstrap-responsive.min.css Examples用 CSSファイルで設定されたセレクタを使用。 --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container">
<!-- <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a> --> <!-- ディレクトリ修正 --> <a class="brand" href="v3.4.0/examples/"><img src="v3.4.0/resources/logo.png"> OpenLayers 3 Examples</a>
</div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="span12 wrapper"> <div id="map" class="map"></div> <div id="progress"></div> </div> </div> <div class="row-fluid"> <div class="span12"> <h4 id="title">Image load events example</h4> <p id="shortdesc">Example using image load events. </p> <div id="docs">
<p>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>
<!-- <p>See the <a href="image-load-events.js" target="_blank">image-load-events.js source</a> for more detail on how this is done.</p> --> <!-- ファイル修正 --> <p>See the <a href="2102-ol3ex.js" target="_blank">2102-ol3ex.js source</a> for more detail on how this is done.</p>
</div> <div id="tags">image, events, loading</div> </div> </div> </div>
<!-- <script src="../resources/jquery.min.js" type="text/javascript"></script> <script src="../resources/example-behaviour.js" type="text/javascript"></script> --> <!-- ディレクトリ修正 jQuery Minified版と example-behaviour.js（Examples用 JSコード[文字コードなど]） --> <script src="v3.4.0/resources/jquery.min.js" type="text/javascript"></script> <script src="v3.4.0/resources/example-behaviour.js" type="text/javascript"></script>
<!-- <script src="loader.js?id=image-load-events" type="text/javascript"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=2102-ol3ex" type="text/javascript"></script>
</body> </html>
0 件のコメント:
コメントを投稿