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

Question

Hi everyone i need a preload gif but my scenario is that when i click on the menu button for navigation to next page it should start until the next page appear and it should be close after next page load. if there is any plugin or any kind of code you guys can provide i will be very thankful ...

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

<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 );

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

Preload gif image with page navigation

ajax

jquery

preload