jquery - 带有 jQ​​uery 的 DIV 预加载器

Question

我有一个用于 div 预加载的 Javascript 代码，但我需要使用 jQuery 进行预加载。这是我的代码：

<script type="text/javascript">
window.onload=function(){
        document.getElementById('preload').style.display = 'block';
        document.getElementById('ajax-loader').style.display = 'none';
    }
</script>

<style type="text/css">
div#preload{
        display:none;
        margin:0 auto;
  }
</style>

<img src="/images/ajax.gif" id="ajax-loader"  />
<div id="preload">Some text</div>

如何使用 jquery 为 DIV 进行淡出预加载？感谢你

Answer 1

这不完全等同于 javascript，但看起来它会做你想做的事：

工作演示：http: //jsfiddle.net/lucuma/84j5S/

$(document).ready(function() {
   $('#preload').show();
   $('#ajax-loader').hide();
});

等效的是：

工作演示：http://jsfiddle.net/lucuma/84j5S/2/

$(document).ready(functon() {
   $('#preload').css('display','block');
   $('#ajax-loader').css('display','none');
});

这些 jquery 解决方案与通过 css 执行此操作相同：

#preload {display:block}
#ajax-loader {display:none}

尽管除非您打算将 jquery 添加到您的项目中，否则没有理由仅仅为此而包含该库。