Question

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

/ background：url（ajax-loader.gif）no-repeat center #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说旋转器和图层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()以使其可见

Answer 2

改变这个：

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

用这个：

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

另外我必须补充一点IE8与fadeIn / fadeOut有问题，所以如果您仍有问题需要尝试.show() / hide()，我会推荐。< / p>

Answer 3

我接受了Arun的回答，因为它帮助我找到了解决方案。基于他的答案和我的CSS，我终于设法进行了这个jquery调用：

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

        var spinner = $('#spinner');

        spinner.append('<img src="../../Content/ajax-loader.gif" width="250" height="250"/>').css('background', '#fff').show();
    }
}

这会保留每个css元素最初存在并在Internet Explorer和所有其他浏览器中播放我的gif。谢谢！

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

3 个答案: