JQuery

Question

我有一个导航栏，里面有一些 link。单击任何 link 时，它会从导航栏旁边的 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

我终于找到了一个有趣的解决方案来解决我的问题。在 div 中加载 html 内容时，使用 GIF 微调器图像会冻结，因此我使用了 css 创建的微调器，该微调器运行平稳，没有冻结。可以按照 here.

的说明创建

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

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

html

javascript

load