Question

当页面加载图像时，假设隐藏，直到验证了url参数，并且基于参数值，将显示右图像。这里的问题是图像在捕捉的代码中根本不是隐藏的，但是当相同的代码在不同的项目中使用时，它可以工作。什么是魔法！

脚本

     $(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 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">
                    &nbsp;&nbsp;&nbsp;
                    <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>

Answer 1

删除此

$('#graphic img').hide();

将这些更改为

<img  id="gate1" src="img/Fully Close Red.png" style="display:none; left: 321px; top: 294px; z-index: 35; width: 154px; height: 92px; "  />
<img  id="gate2" src="img/Fully Open Green.png" style="display:none; left: 333px; top: 300px; z-index: 35; width: 154px; height: 92px; " />    
<img  id="gate3" src="img/Half Open Green.png" style="display:none; left: 316px; top: 299px; z-index: 35; width: 154px; height: 92px; " />
<img  id="gate4" src="img/Half Open Red.png" style="display:none; left: 317px; top: 296px; z-index: 35; width: 154px; height: 92px; " />

确保图像在渲染时隐藏

图像未在加载时隐藏

1 个答案: