javascript - JQuery - 如何在 div 中加载内容时显示微调器？

Question

我有一个导航栏，里面有一些链接。单击任何链接时，它会从导航栏旁边的 div 中的相应 html 页面加载内容。由于加载内容可能需要几秒钟，我试图在加载内容时显示一个旋转器。这是我尝试过的示例代码:

$( '.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);
});

上面的代码显示了旋转器，它开始旋转，然后停止并卡住，直到内容加载完毕。然后旋转器消失，内容显示得很好。我需要让它继续旋转，直到内容完全加载，而不是这个卡住的旋转器。

Here is a full code example in plnkr

有什么建议吗？

Answer 1

我终于找到了一个有趣的解决方案来解决我的问题。使用 GIF 旋转器图像在 div 中加载 html 内容时会卡住，因此我使用了 css 创建的旋转器，它工作顺利而不会卡住。可以按照说明创建它 here .