Ajax Loader Gif无法在IE或Chrome中运行

Question

我是ajax的新手，正在尝试在页面加载时显示加载的gif。 它可以在Firefox中运行，但不会在Chrome或IE中显示。 我假设我正在寻找东西。 我正在使用在Google搜索中找到的代码。

这是代码：

<style type="text/css">

body {
    margin: 0px;
}

#overlay {

    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

</style>

<script type="text/javascript">
<!--

var overlay = {

    click_on_overlay_hide: true,

    show_loading_image: true,

    loading_image: "http://www.leeparts.com/images/ajax-loader.gif",

    $: function(id){
        return document.getElementById(id);
    },

    init: function(){
        var ol_div = document.createElement("div");

        ol_div.id = "overlay";
        ol_div.style.display = "none";
        ol_div.onclick = (this.click_on_overlay_hide)? overlay.hide : null;

        if(this.show_loading_image){
            var l_img = document.createElement("img");

            l_img.src = this.loading_image;
            l_img.style.position = "absolute";
            l_img.style.top = (((window.innerHeight)? window.innerHeight : document.body.clientHeight) / 2) + "px";
            l_img.style.left = (((window.innerWidth)? window.innerWidth : document.body.clientWidth) / 2) + "px";

            ol_div.appendChild(l_img);
        }

        document.body.appendChild(ol_div);
    },

    show: function(){
        if(this.$("overlay")){
            this.$("overlay").style.display = "";
        }
    },

    hide: function(){
        if(overlay.$("overlay")){
            overlay.$("overlay").style.display = "none";
        }
    }

}

//-->
</script>

Answer 1

我在jsfiddle中测试了您的代码，并在Chrome中正常运行。 刚刚添加了这个：

<button id="show">show</button>
<button id="hide">hide</button>

和这个：

overlay.init();
overlay.$('show').onclick = function () { overlay.show();};
overlay.$('hide').onclick = function () {overlay.hide();};