javascript - 无法通过 id 获取 div 元素以在 Internet Explorer 中显示 gif

Question

我试图在加载窗口中显示 .gif 图像以提醒我的用户加载正在进行中，非常简单。我只使用 css 和 background 属性，如下所示:

/背景:url(ajax-loader.gif) 无重复中心#fff;/

但是我的 .gif 没有加载到 Internet Explorer 中。所以我做了一个研究，发现this并且，基于 J.Davies 的解决方案，我在我的 js 文件中实现了这个:

function ShowProgress() {
    if (!spinnerVisible) {
        $('div#layer').fadeIn("fast");
        $('div#spinner').fadeIn("fast");
        spinnerVisible = true;

        var pb = $('#spinner');
        pb.innerHTML = '<img src="./ajax-loader.gif" width=200 height=40/>';
        pb.style.display = "";
    }
}

我的问题是它在 chrome 中仍然有效，但我在 Internet Explorer 中遇到崩溃，说它 pb 未定义。是否有关于如何使用 jquery 和 Internet Explorer 的特殊性？有关信息，这是我的显示:

<div id="body">
    @RenderSection("featured", false)
    <section class="content-wrapper main-content clear-fix">
        <section>
            @Html.Partial("MessageDisplay")
        </section>
        <div id="layer"></div>
        <div id="spinner">
            Loading, please wait...
        </div> 
        @RenderBody()
    </section>
</div>

css 说 spinner 和 layer div 是隐藏的:

div#spinner {
    display: none;
    width: 300px;
    height: 300px;
    position: fixed;
    top: 40%;
    left: 45%;
    /*background: url(ajax-loader.gif) no-repeat center #fff;*/
    text-align: center;
    padding: 10px;
    font: normal 16px Tahoma, Geneva, sans-serif;
    border: 1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 2;
    overflow: auto;
}

div#layer {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #a4a3a3;
    background-color: rgba(164, 163, 163, 0.5);
    z-index: 1;
    overflow: auto;
    -moz-opacity: 0.5
}

Answer 1

pb 是一个 jQuery 对象。不是 dom 引用，因此其中没有 innerHTML 或 style 属性。您需要使用 jQuery 提供的实用方法来设置这些

var pb = $('#spinner');
pb.html('<img src="./ajax-loader.gif" width=200 height=40/>').show();

在您的情况下，您可以使用 .html()设置 innerHTML 和 .show()使其可见