我有一个大页面，DOM需要一段时间才能完全加载。我认为在页面加载时出现一些加载动画会很好，所以我实现了这个：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("#wait").animate({
top: -200
}, 1500);
});
</script>
<body>
<div id="wait">
<img src="/assets/images/ajax-loader.gif" />
</div>
（找到here）
它可以工作，但只在最后一刻，当DOM已经加载了大约4 / 5s。希望有人知道更好的方法吗？
答案 0 :(得分：1)
而不是使用$（window）.load（）尝试$（document）.ready（），nornally $（window）.load（）通常在加载大图像时使用
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<script>
// Wait for window load
$(document).ready(function() {
// Animate loader off screen
$("#wait").animate({
top: -200
}, 1500);
});
</script>
<body>
<div id="wait">
<img src="/assets/images/ajax-loader.gif" />
</div>
修改 如果你加载一个大图像我修改了代码，希望这会帮助你
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function showLoading(){
var $loading = $(".loading");
var windowH = $(window).height();
var windowW = $(window).width();
$loading.css({
position:"fixed",
left: ((windowW - $loading.outerWidth())/2 + $(document).scrollLeft()),
top: ((windowH - $loading.outerHeight())/2 + $(document).scrollTop())
}).show();
}
function hideLoading(){
$(".loading").hide();
}
$(function(){
showLoading();
$("#Iframe").load(function(){
hideLoading();
}).attr("src", "http://www.somesite.com/images/Purple-Flowers-Wallpaper.jpg");
});
</script>
<div id="dialog-box">
<iframe id="Iframe" src="javascript:void(0);" height="500px" width="800px" ></iframe>
</div>
<div class="loading">
<br /><br />
<div>Loading...</div>
</div>