Ajax Loader Gif not working in IE or Chrome

Question

I am new to ajax and trying to show a loading gif while the page is loading. It is working in Firefox, but will not display in Chrome or IE. I am assuming I am over looking something. I am using code I found in a Google search.

Here is the code:

<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

I tested your code in jsfiddle and it works fine in Chrome. Just added this:

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

and this:

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