When page is loading an image suppose to hide until the url parameter verified and based on the parameter value the right image will display. The issue here is that image is not hide at all specially in the snapped code, but when the same code uses in different projects it works. what is magic here!
Script
$(function () { $('#graphic img').hide(); $.ajax({ url: 'ServerData.aspx', dataType: 'text', type: "GET", success: function (data) { var result = $.trim(data); if (result == 2) { $("#gate2").show(); } else if (result == 3) { $("#gate2").show(); } else if (result == 4) { $("#gate3").show(); } else { } } }); }); Div
<div class="portlet light bg-inverse"> <div class="portlet-title"> <div class="caption font-green-haze bold uppercase">Data</div> </div> <div class="portlet-body" style="overflow: auto;"> <div id="divGraphic" style="text-align: center; margin: auto; width: 960px; height: 520px; overflow: hidden; position: relative;"> <img src="Img/wg-platform.png" style="margin: auto; height: 691px;" /> <%--<img src="img/wg-platform.png" style="margin: auto; margin-top: -210px;" />--%> <div id="river"> <div id="divRiver4"> <img class="wg-river ease" src="img/wg-river.png" style="left: 264px; top: 330px; height: 143px; width: 359px;" /> <img class="wg-river" style="left: 314px; top: 305px; right: 285px; height: 143px;" src="img/wg-river.png" /> <img class="wg-river" style="left: 288px; top: 318px; right: 311px; height: 143px;" src="img/wg-river.png" /> </div> </div> <div id="gate"> <div id="divGate1"> <label class="lblGate">1</label> </div> <div id="graphic"> <img id="gate1" src="img/Fully Close Red.png" style="left: 321px; top: 294px; z-index: 35; width: 154px; height: 92px; " /> <img id="gate2" src="img/Fully Open Green.png" style="left: 333px; top: 300px; z-index: 35; width: 154px; height: 92px; " /> <img id="gate3" src="img/Half Open Green.png" style="left: 316px; top: 299px; z-index: 35; width: 154px; height: 92px; " /> <img id="gate4" src="img/Half Open Red.png" style="left: 317px; top: 296px; z-index: 35; width: 154px; height: 92px; " /> </div> </div> </div> </div> </div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>