页面导航预加载gif图像

Question

大家好，我需要一个预加载gif，但我的场景是，当我单击菜单按钮导航到下一页，它应该开始，直到下一页出现，它应该关闭后，下一页加载。如果有任何插件或者你们能提供的任何代码，我会非常感谢……

这是我用来显示预加载器的代码。

<script type="text/javascript">
    jQuery(document).ready(function($) {  

    $(window).load(function(){
      $('#myloader').fadeOut('slow',function(){$(this).remove();});
       $('body').delay(350).css({'overflow':'visible'});
    });

    });
    </script>

Answer 1

尝试这样的方法(注释中的解释)：

( function( $ ) {

    $( document ).ready( function() {

        // document is ready, hide loader, don't remove since we want it back later
        $( '#myloader' ).fadeOut( 'slow', function() {
            // show scrollbar <- flaw in design!
            $( 'body' ).css( { 'overflow' : 'visible' } );
        } );

        // when user clicks on a link with class hide-loader
        $( 'a.hide-loader' ).on( 'click', function( event ) {
            // don't follow the link, we want an animation first
            event.preventDefault();

            // show loader again
            $( '#myloader' ).fadeIn( 'slow', function() {
                // follow the link
                window.location = $( this ).attr( 'href' );
            } );
        } );
    } );

} )( jQuery );