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解释创建。