Question

我正在使用ajax loader gif，我试图在用户点击按钮时显示（同时等待显示gif的响应）。

Chrome和FireFox中的一切都运行正常但是当它在IE上进行测试时会中断。

HTML

 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="ShowLoading()"/>

 <div id="blockScreen" class="blockScreen" style="display:none; width:100%; text-align:center;" >&nbsp;</div>
 <img src="Images/ajax_loader.gif" style="display: none;"/>

javScript

  function ShowLoading() {

       var divBg = document.getElementById('blockScreen');
       var divLoad = document.createElement('div');
       var img = document.createElement('img');

       img.src = 'Images/ajax_loader.gif';
       img.height = 100;
       img.width = 100;
       divLoad.setAttribute("class", "blockScreenLoader");
       divLoad.appendChild(img);

       divBg.appendChild(divLoad);


       if (document.getElementById('MainContent_gridDiv') != null) {
           document.getElementById('MainContent_gridDiv').style.display = 'none';

       }

       document.getElementById('blockScreen').style.display = 'block';

   }

错误

错误：属性＆＃39; ShowLoading＆＃39;为null或未定义，不是Function对象

我尝试将代码剥离到最低限度，但仍然存在错误。为什么会在IE中发生这种情况？

Answer 1

我猜你在html的底部有脚本块，这意味着当解析onclick属性时该函数不存在。这是一个在IE中运行的示例（使用IE11测试）http://jsfiddle.net/T5aEn/

请注意，如果您将脚本块更改为“ondomready”之类的位置，那么您将获得未定义的函数错误。

<head>
    <script>
    function ShowLoading() {
        ...
    }
    </script>
</head>
<body>
     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="ShowLoading()"/>

     <div id="blockScreen" class="blockScreen" style="display:none; width:100%; text-align:center;" >&nbsp;</div>
     <img src="Images/ajax_loader.gif" style="display: none;"/>
</body>

Answer 2

IE 11的问题是你必须在分配src属性之前将img对象添加到页面中，

实施例

这在IE 11中失败

var img = New Image()
img.src = 'test.gif'    
document.body.appendChild(img);

尝试

var img = New Image();
document.body.appendChild(img);
img.src = 'test.gif'

Loader不在IE中工作

2 个答案: