4

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

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

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

我从高处和低处找遍了，一无所获。最近我得到的是一个 jquery 微调器，但这不是我所追求的。

想知道你们中是否有人遇到过这种情况。如果是这样，你做了什么来定制它..

例子：

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

大......

洛……

洛阿....

加载...

加载...

加载。

正在加载

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

4

3 回答 3

6

像这样的东西？

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/

于 2010-12-22T00:33:49.193 回答
4

不需要 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/

于 2010-12-22T00:39:03.593 回答
1

CSS-Tricks有这个 jQuery 插件。

于 2010-12-22T02:45:24.710 回答