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