最轻的js/css，用于向用户提供SPA正在加载/初始化的视觉反馈

the lightest js/css to give visual feedback to the user that the SPA is loading/initializing

本文关键字：SPA 加载 视觉 初始化 用户 css js 用于      更新时间：2023-09-26

在我的SPA（单页应用程序）中，第一页的内容非常轻。它只是动态加载一个脚本，然后脚本将负责填充页面。

它看起来真的是这样的：

<!docType HTML><html><body><div id='main'>initializing...</div>
<script>
var s = document.createElement("script"),
    t = document.getElementsByTagName("script")[0];
s.src="main.js";
t.parentNode.insertBefore(s, t);
</script>
</body>
</html>

我的问题是：通过添加最少量的javascript代码或（可能是一些内联css样式），我可以使我的"initializing…"字符串更有活力*。。。

注意：不允许第三方，因为这无论如何都会延迟装载。。。

*通过更具动画效果我打算用这种

loading.     (immediately)
loading..    (500ms later)
loading...   (1s later)
loading..    (1500ms later)

希望你明白要点。。。

这是我的-它依赖于"div"中ID为"dot"的额外span。为了保持最大的浏览器兼容性，我故意避免使用CSS动画：

(function() {
    var dir = 1, s = '';
    (function loop() {
        var d = document.getElementById('dot');
        if (d) {
            var l = s.length;
            if (l > 2 || l < 1) dir = 1 - dir;
            s = dir ? s + '.' : s.substring(0, l - 1);
            d.innerHTML = s;
            setTimeout(loop, 500);
        }
    })();
})();

演示位置http://jsfiddle.net/6x2qh9mh/1/

一旦从DOM中移除元素"dot"，循环就会终止。

以下是缩小的相同代码（有一些代码技巧，以提供帮助）：

+function(){var e,d=1,s='...',l=0;+function r(){if(e=document.getElementById('dot'))
{l+=d?1:-1;e.innerHTML=s.substr(0,l);d^=!(l%3);setTimeout(r,500);}}()}();

这是我的156个字符，您可以在外部js文件中使用clearInterval(l)来停止它。

var x=0;var l=setInterval(function(){x=(x+1)%4;var d ='',i=0;while(i<x){i++;d+='.';}document.getElementById('main').innerHTML='initializing'+d;},500);
<div id="main"></div>

扩展：

var x = 0;
var l = setInterval(function() {
  x = (x + 1) % 4;
  var d = '',
    i = 0;
  while (i < x) {
    i++;
    d += '.';
  }
  document.getElementById('main').innerHTML = 'initializing' + d;
}, 500);

这是一个使用css的简单加载器：

<style>
#squaresWaveG{
position:relative;
width:240px;
height:29px}
.squaresWaveG{
position:absolute;
top:0;
background-color:#000000;
width:29px;
height:29px;
-moz-animation-name:bounce_squaresWaveG;
-moz-animation-duration:0.8s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-animation-name:bounce_squaresWaveG;
-webkit-animation-duration:0.8s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-animation-name:bounce_squaresWaveG;
-ms-animation-duration:0.8s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-animation-name:bounce_squaresWaveG;
-o-animation-duration:0.8s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
animation-name:bounce_squaresWaveG;
animation-duration:0.8s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#squaresWaveG_1{
left:0;
-moz-animation-delay:0.32s;
-webkit-animation-delay:0.32s;
-ms-animation-delay:0.32s;
-o-animation-delay:0.32s;
animation-delay:0.32s;
}
#squaresWaveG_2{
left:30px;
-moz-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
-ms-animation-delay:0.4s;
-o-animation-delay:0.4s;
animation-delay:0.4s;
}
#squaresWaveG_3{
left:60px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#squaresWaveG_4{
left:90px;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}
#squaresWaveG_5{
left:120px;
-moz-animation-delay:0.64s;
-webkit-animation-delay:0.64s;
-ms-animation-delay:0.64s;
-o-animation-delay:0.64s;
animation-delay:0.64s;
}
#squaresWaveG_6{
left:150px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}
#squaresWaveG_7{
left:180px;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
-ms-animation-delay:0.8s;
-o-animation-delay:0.8s;
animation-delay:0.8s;
}
#squaresWaveG_8{
left:210px;
-moz-animation-delay:0.88s;
-webkit-animation-delay:0.88s;
-ms-animation-delay:0.88s;
-o-animation-delay:0.88s;
animation-delay:0.88s;
}
@-moz-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}
100%{
background-color:#FFFFFF;
}
}
@-webkit-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}
100%{
background-color:#FFFFFF;
}
}
@-ms-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}
100%{
background-color:#FFFFFF;
}
}
@-o-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}
100%{
background-color:#FFFFFF;
}
}
@keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}
100%{
background-color:#FFFFFF;
}
}
</style>
<div id="squaresWaveG">
<div id="squaresWaveG_1" class="squaresWaveG">
</div>
<div id="squaresWaveG_2" class="squaresWaveG">
</div>
<div id="squaresWaveG_3" class="squaresWaveG">
</div>
<div id="squaresWaveG_4" class="squaresWaveG">
</div>
<div id="squaresWaveG_5" class="squaresWaveG">
</div>
<div id="squaresWaveG_6" class="squaresWaveG">
</div>
<div id="squaresWaveG_7" class="squaresWaveG">
</div>
<div id="squaresWaveG_8" class="squaresWaveG">
</div>
</div>

更多

相关文章：