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背景精灵，动态设置src可能是迄今为止我见过的最黑的方式; p

Answer 2

这是一个递归的setTimeout版本，我认为这是你正在寻找的。

var i = 0, intervalId;
function animate(){
    var newImg = 'images/loadBar' + ((i++ % 3) + 1) + '.jpg'
    document.getElementById('main_photo_img').src = newImg;
    intervalId = setTimeout(animate, 300);
}

再一次，你要用

来阻止它

clearInterval(intervalId);

要启动它，第一张图像会立即显示，您只需拨打

即可

animate();

但是为了让第一张图像在显示之前等待300毫秒，你会做

intervalId = setTimeout(animate, 300);

尝试将缓冲区符号显示为pics preload时的无限循环

2 个答案: