javascript - JQuery - How to show a spinner while loading content in a div? - Stack Overflow

admin管理员组

文章数量:1406914

I have a navigation bar with some links inside it. When clicking any link it loads a content from a corresponding html page in a div found beside the navigation bar. Since loading the content could take a couple of seconds i am trying to show a spinner while the content is loaded. Here is a sample code i have tried:

$( '.nav_link' ).click( function( e ) {
    $( '.div_content' ).html('');

    var link = $(this);
    setTimeout(function() {
        $( ".div_content" ).load( link.attr( 'ref' ) );
    }, 1000);

    $( '.spinner' ).show();  // show Loading Div

    setTimeout(function() {
        $( '.spinner' ).hide(); // hide loading div
    },1500);
});

The above code shows the spinner and it starts spinning, then it stops and freezes till the content is loaded. The spinner then disappears and the content appears just fine. Instead of this freezing spinner i need to make it keep spinning till the content is fully loaded.

Here is a full code example in plnkr

Any suggestions?

I have a navigation bar with some links inside it. When clicking any link it loads a content from a corresponding html page in a div found beside the navigation bar. Since loading the content could take a couple of seconds i am trying to show a spinner while the content is loaded. Here is a sample code i have tried:

$( '.nav_link' ).click( function( e ) {
    $( '.div_content' ).html('');

    var link = $(this);
    setTimeout(function() {
        $( ".div_content" ).load( link.attr( 'ref' ) );
    }, 1000);

    $( '.spinner' ).show();  // show Loading Div

    setTimeout(function() {
        $( '.spinner' ).hide(); // hide loading div
    },1500);
});

The above code shows the spinner and it starts spinning, then it stops and freezes till the content is loaded. The spinner then disappears and the content appears just fine. Instead of this freezing spinner i need to make it keep spinning till the content is fully loaded.

Here is a full code example in plnkr

Any suggestions?

• javascript
• jquery
• html
• load

Share Improve this question Follow edited Jul 18, 2016 at 12:22 Brad asked Jul 17, 2016 at 22:14 BradBrad 4,5571010 gold badges5959 silver badges9393 bronze badges 3

• the most likely explanation is that there is an error in your load function....check the console! – David Commented Jul 17, 2016 at 22:19
• "but the content does not appear" Try substituting .attr( 'href' ) for .attr( 'ref' ) – guest271314 Commented Jul 17, 2016 at 22:20
• Can you include html at Question? – guest271314 Commented Jul 17, 2016 at 22:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I have finally found an interesting solution to my question. Using a GIF spinner image will freeze while loading the html content in the div, so instead i have used a css created spinner which has worked smoothly without freezing. It can be created as explained here.

本文标签： javascriptJQueryHow to show a spinner while loading content in a divStack Overflow