nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Loading image won't stop

MayJeff

Here is my code:

Edit fiddle - JSFiddle‌

The loading image will start loading when map is loading but after map is loaded the loading image won't stop. Can you tell me where I add to modify the code?

Thanks.

Find more posts tagged with

Accepted answers

jskinner

Hi May,

You will need to add the esri.domUtils class to your code. Also, you will need to use the 'update-start' and 'update-end' events. Ex:

<!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.10/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.10/"></script>
    <script>
     require([
        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/on",
        "dojo/dom",
        "esri/domUtils",
        "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, on, dom, domUtils
      ) {
          var map;
    var loading, loadingIconShow, loadingIconHide; //loading #1 
       loading = dom.byId("loadingImg");  //loading image. id

        map = new esri.Map("map", {
          basemap: "topo",
          center: [117.773, 28.498],
          zoom: 6
        });

        loadingIconShow = map.on("update-start", showLoading);
        loadingIconHide = map.on("update-end", hideLoading);


        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
        dynamicMapServiceLayer.setOpacity(0.4);
        map.addLayer(dynamicMapServiceLayer);
  
    function showLoading(){
        domUtils.show(loading);
        map.disableMapNavigation();
        map.hideZoomSlider();
        }

    function hideLoading(error){
      domUtils.hide(loading);
      map.enableMapNavigation();
      map.showZoomSlider();
      }
      });
    </script>
  </head>

  <body>
    <div id="map">
  <img id="loadingImg" src="images/loading.gif" style="position:absolute; right:512px; top:256px; z-index:100;" /> <!--loading #5-->
  </div>
  </body>
</html>

All comments

MayJeff

Thank you all very much. It works.

JohnGrayson

You are missing a require for "esri/domUtils":

Edit fiddle - JSFiddle‌

jskinner

Hi May,

You will need to add the esri.domUtils class to your code. Also, you will need to use the 'update-start' and 'update-end' events. Ex:

<!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.10/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.10/"></script>
    <script>
     require([
        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
        "dojo/on",
        "dojo/dom",
        "esri/domUtils",
        "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, on, dom, domUtils
      ) {
          var map;
    var loading, loadingIconShow, loadingIconHide; //loading #1 
       loading = dom.byId("loadingImg");  //loading image. id

        map = new esri.Map("map", {
          basemap: "topo",
          center: [117.773, 28.498],
          zoom: 6
        });

        loadingIconShow = map.on("update-start", showLoading);
        loadingIconHide = map.on("update-end", hideLoading);


        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer");
        dynamicMapServiceLayer.setOpacity(0.4);
        map.addLayer(dynamicMapServiceLayer);
  
    function showLoading(){
        domUtils.show(loading);
        map.disableMapNavigation();
        map.hideZoomSlider();
        }

    function hideLoading(error){
      domUtils.hide(loading);
      map.enableMapNavigation();
      map.showZoomSlider();
      }
      });
    </script>
  </head>

  <body>
    <div id="map">
  <img id="loadingImg" src="images/loading.gif" style="position:absolute; right:512px; top:256px; z-index:100;" /> <!--loading #5-->
  </div>
  </body>
</html>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.