使用页面导航预加载gif图像

Question

大家好我需要一个preload 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 );