Question

我要做的是制作一个显示一些消息的加载屏幕和一个闪烁的省略号。它看起来像这样，但更具动画效果：

Crunching data.
Crunching data..
Crunching data...
Crunching data.
Crunching data..

目前，我有以下代码，但它崩溃了网站，所以我认为假设它不起作用是公平的：

function loader(div) {
  div.append('<div id="loader"></div>');
  load = div.find('#loader');
  load.html('Crunching Some Data.');
  numberOfPeriods = 1;
  while($('#loader').length > 0) {
    setTimeout(function() {
      if(numberOfPeriods < 4) {
        numberOfPeriods++;
        for(var i=0; i<numberOfPeriods; i++) {
          load.append('.');
        }
      } else {
        load.html('Crunching Some Data.');
        numberOfPeriods = 1;
      }
    }, 200);
  }
}

怎么会这样做？

Answer 1

尝试这样的事情

function showLoader() {
    var load;
    load = $('<div id="loader"></div>');
    $(document.body).append(load);
    load.html('Crunching Some Data.');
    numberOfPeriods = 1;

    interval = setInterval(function(){
        if(numberOfPeriods < 4)
        {
            load.html(load.html() + '.');
            numberOfPeriods++;
        }
        else
        {
            load.html('Crunching Some Data.');
            numberOfPeriods = 1;
        }
    }, 200);
}

function hideLoader(){
    clearInterval(interval);
    $('#loader').remove();
}

Answer 2

不要将setTimeout放入循环中。相反，测试＆＃34;完成＆＃34;在setTimeout调用的函数顶部的条件（测试#loader的长度）。如果没有完成，请再次使用setTimeout。如果完成，请调用一个可以移动的函数。

椭圆字加载屏幕

2 个答案: