javascript - 尝试将缓冲区符号显示为图片预加载时无限循环

Question

我真的对此感到沮丧。所以我正在用 javascript 制作幻灯片，但在加载所有图像时我想显示一个缓冲符号..

这是缓冲符号代码。如果您有更好的方法，请说出来。

function loadAnimation(){
        setTimeout(
            "document.getElementById('main_photo_img').src = 'images/loadBar1.jpg'", 300);
        setTimeout(
            "document.getElementById('main_photo_img').src = 'images/loadBar2.jpg'", 600);
        setTimeout(
            "document.getElementById('main_photo_img').src = 'images/loadBar3.jpg';", 900);
        }

显示组成缓冲动画的 3 个图像。

我在加载图像之前播放它的代码是这样的..

while(!pic1.onload){
    loadAnimation();
}

所有发生的事情都是无限循环。

Answer 1

尝试这样的事情:

function loadAnimation() {
    var i = 0,
        timer;
    (function k() {
        var cur = i++ % 3 + 1;
        document.getElementById('main_photo_img').src = 'images/loadBar' + cur + '.jpg';
        timer = setTimeout(k, 300);
    })()
    return {
        cancel: function () {
            clearTimeout(timer);
        }
    };
}


....

var animation = loadAnimation();
pic1.onload = animation.cancel; //The cancel will be called when pic1 loads. You may add other code in the cancel function if needed

我可能只使用 gif 或 css 背景 Sprite ，动态设置 src 可能是迄今为止我见过的最黑客的方法；p