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

时间:2018-03-02 14:19:58

标签: jquery ajax preload

  

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

1 个答案:

答案 0 :(得分: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 );