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();};