css - 更好的方法来显示 gif 预加载 img 而不会看到它的中心

Question

我整理了一些代码，用于在页面加载时显示加载 img，在显示加载 img 时似乎可以正常工作，但是当它首次出现时，您可以看到加载 img div 以页面为中心。就目前而言，代码正在工作，但看到它自己居中很烦人，是否有另一种编码方式，所以它不会那样做，或者可能是另一种更好/更实用/优化/交叉的方式浏览器友好/等...这是代码以及css和html，谢谢大家/gals：

</body>
<script type="text/javascript">
$(document).ready(function() {
  setTimeout('$("#container").fadeTo(1000, 1)', 2000);
});
$('#container').css('opacity', 0);
$('#preloader').css('opacity', 1);
$(window).load(function() {
  $('#preloader').fadeTo('opacity', 0);
  $('#container').fadeTo(1000, 1);
});
</script>

CSS：

#preloader{
position:absolute;
display:block;
width:100%;
text-align:center;
}

HTML：

<div id="preloader"><img src="/images/preloader.gif"/>
</div>
<section id="container">

---Content---

</section>

任何帮助表示赞赏，谢谢。