我正在使用Codrops页面预加载效果。由于它是一个演示,他们没有实现一些真正使得进度条加载与页面一样多的东西。我需要这个才能在网站满载时显示网站,而不是在动画时间之后。 这是js代码:
(function() {
var support = { animations : Modernizr.cssanimations },
container = document.getElementById( 'ip-container' ),
header = container.querySelector( 'header.ip-header' ),
loader = new PathLoader( document.getElementById( 'ip-loader-circle' ) ),
animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
function init() {
var onEndInitialAnimation = function() {
if( support.animations ) {
this.removeEventListener( animEndEventName, onEndInitialAnimation );
}
startLoading();
};
// disable scrolling
window.addEventListener( 'scroll', noscroll );
// initial animation
classie.add( container, 'loading' );
if( support.animations ) {
container.addEventListener( animEndEventName, onEndInitialAnimation );
}
else {
onEndInitialAnimation();
}
}
function startLoading() {
// simulate loading something..
var simulationFn = function(instance) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
// reached the end
if( progress === 1 ) {
classie.remove( container, 'loading' );
classie.add( container, 'loaded' );
clearInterval( interval );
var onEndHeaderAnimation = function(ev) {
if( support.animations ) {
if( ev.target !== header ) return;
this.removeEventListener( animEndEventName, onEndHeaderAnimation );
}
classie.add( document.body, 'layout-switch' );
window.removeEventListener( 'scroll', noscroll );
};
if( support.animations ) {
header.addEventListener( animEndEventName, onEndHeaderAnimation );
}
else {
onEndHeaderAnimation();
}
}
}, 80 );
};
loader.setProgressFn( simulationFn );
}
function noscroll() {
window.scrollTo( 0, 0 );
}
init();
})();
谢谢你的建议!
安德烈