[GIS] How to add a “loading” image is ESRI JSAPI AMD

arcgis-javascript-apiarcgis-server

Does anyone have an example of how to display a "loading" image in the new AMD environment of ESRI's JSAPI? Familiar with doing it in the past, just seems there's quite a lack of documentation. Thanks.

Best Answer

Here what the sample looks like in AMD

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
        var map;

        require(["esri/map", "dojo/dom","dojo/domReady!"], function (Map, dom) {
            map = new Map("map", {
                basemap: "topo",
                center: [117.773, 28.498], // long, lat
                zoom: 6,
                sliderStyle: "small"
            });

            var loading = dom.byId("loadingImg");

            var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
            dynamicMapServiceLayer.setOpacity(0.4);
            map.addLayers([dynamicMapServiceLayer]);

            map.on("update-start", function () {
                esri.show(loading);
            });

            map.on("update-end", function () {
                esri.hide(loading);
            });

        });
    </script>
  </head>

  <body class="claro">
    <div id="map" style="position:relative; width:1024px; height:512px; border:1px solid #000;">
      <img id="loadingImg" src="images/loading.gif" style="position:absolute; right:512px; top:256px; z-index:100;" />
    </div>
  </body>
</html>
Related Question