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

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

1 个答案: