JQuery的加载动画：仍有较大差距出现动画之前 [英] JQuery Loading animation: still large gap before animation appears
问题描述
我有一个大的页面，在DOM需要一段时间完全加载。我认为这将是很好的有一个小加载动画出现，而网页载入，所以我实现了这个：
I have a large page where the DOM takes a while to completely load. I thought it would be good to have a little loading animation appear whilst the page is loading so I implemented this:
<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>
（
它的工作原理，但只在最后一刻，当DOM已经加载约4 / 5ths。希望如果有人知道更好的方法来做到这一点？
It works but only at the very last moment, when the DOM is about 4/5ths already loaded. Was hoping if anyone knew a better way to do this?
推荐答案
而不是使用$（窗口）.load（）尝试$（文件）。就绪（），$ nornally（窗口）.load（）正常使用装载大图像时
Instead of using $(window).load() try $(document).ready(),nornally $(window).load() is normally used when loading large images
<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>
修改
如果你加载一个大的图像我修改了code，希望这会帮助你。
EDIT if you loading a big image i modified the code, hope this will help you
<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>
这篇关于JQuery的加载动画：仍有较大差距出现动画之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
