Question

我知道tinternet周围的各种网站，允许你自定义loading.gif等，但我想知道...

除了用adobe等创建一个gif之外，还有办法创建自定义文本加载......

因此，您可以指定在图像加载时动画的文本，而不是无处不在的微调器。

我搜索了高低，没找到任何东西。我最近得到的是一个jquery旋转器，但那不是我追求的。

想知道你们之前是否有人遇到过这个问题。如果是这样，你做了什么来定制它..

示例：

有时您可能会看到以下动画（作为gif）

→......

LO .....

... LOA

... LOAD

LOADI ..

LOADIN。

LOADING

我知道上面是通过创建一个动画循环来完成的，但是想知道是否有更新的创建自定义加载消息的方法，可能使用jquery ... 我已经看过它在flash等中完成了

Answer 1

这样的事情？

var $ld = $('#loading');
var idx = 1;
var msg = "Loading..";
var loader = setInterval(function(){
    $ld.text(msg.substr(0,idx));
    idx++;
    if (idx > msg.length)
        idx=1;
},100);

并在完成后致电clearTimeout(loader)。

演示：http://www.jsfiddle.net/gaby/5CVQu/

Answer 2

不需要jQuery：

<div id="loading"></div>

function loading(e, s, t) {
    const to = 200; // miliseconds
    if (arguments.length == 2) t = s;
    switch (s) {
    case '':
        e.innerHTML = '';
        loading(e, t, t);
        break;
    default:
        e.innerHTML += s.charAt(0);
        setTimeout(function() {
            loading(e, s.substr(1), t);
        }, to);
    }
}

loading(document.getElementById('loading'), 'NOW LOADING...');

http://jsfiddle.net/SHiNKiROU/Su2hy/

编辑：我认为您希望在加载消息上填充点数

<div id="loading" style="font-family: monospace;"></div>

function loading(e, s) {
        const to = 200; // miliseconds
        var x = 0;

        function helper(i) {
            var ht = '';
            for (var j = 0; j <= i; j++) {
                ht += s.charAt(j);
            }
            for (var j = i + 1; j < s.length; j ++) {
                ht += '.';
            }
            e.innerHTML = ht;
        }
        return setInterval(function() {
            helper(x++);
            if (x == s.length) x = 0;
        }, to);
}

var intv = loading(document.getElementById('loading'), 'LOADING');
// clearInterval(intv); when loading finished

http://jsfiddle.net/SHiNKiROU/Su2hy/9/

Answer 3

来自CSS-Tricks的this jQuery plugin。

loading.gif（但是定制的）

3 个答案: