Question

我想多次更改加载屏幕文字。例如正在加载，收集用户数据，上传图片，计算等我想在特定时间后更改这些文本。这怎么可能？

Answer 1

要更改内容的状态，您只需向用户显示随机文字，具体取决于您要提取的内容类型。

您不必setTimeout而是检测上传百分比或上传状态，然后相应地设置您的数据。喜欢> 90％，你可以说“几乎完成”100％“移动文件到文件夹”'因为你知道 PHP目前正在对您的文件执行某些操作。同样，利用你的创造力来产生其他情况。

这是一个演示示例

快乐编码：）

为了防止Fiddle不起作用，我还附上了该片段。

function onReady(callback) {
  setTimeout(function() {
    // Do something after 1 second 
    document.getElementById('loading').innerHTML = "Collecting data !!";
  }, 500);
  setTimeout(function() {
    // Do something after 1 second 
    document.getElementById('loading').innerHTML = "Data collected. :)";
  }, 1000);

  setTimeout(function() {
    // Do something after 1 second 
    document.getElementById('loading').innerHTML = "Setting up the view for you...";
  }, 1400);

  setTimeout(function() {
    // Do something after 1 second 
    document.getElementById('loading').innerHTML = "Almost done...";
  }, 1900);


  var intervalID = window.setInterval(checkReady, 3000);

  function checkReady() {
    if (document.getElementsByTagName('body')[0] !== undefined) {
      window.clearInterval(intervalID);
      callback.call(this);
    }
  }
}

function show(id, value) {
  document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function() {
  show('page', true);
  show('loading', false);
});

body {
  background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
  font-family: "Brush Script MT", cursive;
}

h1 {
  font-size: 2em;
  margin-bottom: 0.2em;
  padding-bottom: 0;
}

p {
  font-size: 1.5em;
  margin-top: 0;
  padding-top: 0;
}

#page {
  display: none;
}

#loading {
  font-size: 30px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
  background-image: url("http://i.stack.imgur.com/MnyxU.gif");
  background-repeat: no-repeat;
  background-position: center;
}

<div id="page">
  <h1>The standard Lorem Ipsum passage</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading">Loading...</div>

Answer 2

您可以使用具有最大不透明度的默认文本，并将显示在页面中间。想法就像你完成任何活动改变文本一样。

<div id="loader">
  Loading
</div>

在jquery中

//when loading done change
$("#loader").text("Collecting userdata");
//when Collecting userdata done
$("#loader").text("uploading picture");

如果您使用的是ajax。你可以这样做

 $.ajax({url: "url", success: function(result){
       $("#loader").text("Collecting userdata");
    }});
$.ajax({url: "url", success: function(result){
    $("#loader").text("uploading picture");
    }});

Answer 3

使用 css 和 jquery 作为加载程序

示例： http://jsfiddle.net/kevalbhatt18/ewecopmn/6/

<强> HTML：



<div class="loading"> </div>
<span>something loading above me</span>

Jquery：

的

的
$(".loader").fadeIn();

的

<强> CSS：

的

的
.loading { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index:9999; text-align: center; background: url('https://lh3.googleusercontent.com/10ixuZLPPWgFkm1fEIT1p0SxkIbwLMmxn3XN1hQTUA=s207-p-no') no-repeat center center; background-color:rgba(0, 0, 0, 0.15); }

的

在上面的示例中，我使用简单的图像，您可以使用不同的动画   css中的文本图像

对于文本图像加载器，请单击 - ＆gt; ：   http://preloaders.net/en/letters_numbers_words

Answer 4

您可以为每个阶段设置计时器。所以在5秒之后第一阶段命中，第二阶段命中10秒，依此类推。

加载时更改文字

4 个答案: