Map loads like in design mode until it completes the loading

JoseSanchez · ‎09-04-2013

Hi,

while loading it shows the same page I can see in the Design mode, using VS 2010, not with the final format.

Question: is thre a way to hide the controls until they are ready and show the web page correctly.

Here is the html code,

<body class="soria">
    <!--<div id="navToolbar" data-dojo-type="dijit.Toolbar">
        <div data-dojo-type="dijit.form.Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">
            Zoom In</div>
        <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">
            Zoom Out</div>
        <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">
            Full Extent</div>
        <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">
            Prev Extent</div>
        <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">
            Next Extent</div>
        <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">
            Pan</div>
        <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">
            Deactivate</div>
    </div>-->
    <div id="PageContent" dojotype="dijit.layout.BorderContainer" style="width: 100%;
        height: 100%;">
        <div id="header" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
            data-dojo-props="region:'top'">
            <div id="title">
            </div>
        </div>

<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center', design:'sidebar', gutters:true, liveSplitters:false, style:'z-index:1;'">
 


         <div id="navToolbar" data-dojo-type="dijit.Toolbar" data-dojo-props="region:'top', style:'z-index:1;'">
      <!-- Toolbar buttons here -->

      <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div> 
      <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div> 



    </div>

        <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane"   data-dojo-props="region:'center'" data-dojo-props="Title:'Tab 1', style:'padding:0;overflow:hidden;z-index:1;'" />
        </div>

  </div>


        <!--
        <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
            data-dojo-props="region:'center'" style="border: 2px solid #000;">
            <img id="loadingImg" alt="Loading map please wait..." src="images/loadingMapProgressBar.gif"
                style="position: absolute; right: 512px; top: 256px; z-index: 100;" />
        </div>
-->
        <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners"
            data-dojo-props="region:'right',splitter:'true'">
            Right section
            <div dojotype="dijit.layout.TabContainer">
                <div dojotype="dijit.layout.ContentPane" title="Standard Style">
                    (Legend nested under layer name)
                    <div id="standardDiv">
                    </div>
                </div>
                <div dojotype="dijit.layout.ContentPane" title="Legend">
                    <div id="legendDiv">
                    </div>
                </div>
            </div>
        </div>
        <div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region:'bottom'">
            <span id="dataSource"></span>
        </div>
    </div>
</body>

JasonZou · ‎09-04-2013

The issue happens when dojo is parsing the dom elements. One option is to create a white-background outerDIV that sits on top of the page. It only shows while loading so to cover all other dom elements, and hides after page loads.

#outerDIV {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 1000;
}

JS code to hide it once the page is parsed:

dojo.style(dojo.byId("outerDIV"), "display", "none");

View solution in original post

JasonZou · ‎09-04-2013

The issue happens when dojo is parsing the dom elements. One option is to create a white-background outerDIV that sits on top of the page. It only shows while loading so to cover all other dom elements, and hides after page loads.

#outerDIV {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 1000;
}

JS code to hide it once the page is parsed:

dojo.style(dojo.byId("outerDIV"), "display", "none");

JoseSanchez · ‎09-05-2013

Good idea!!!