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

发布于 2024-12-21 21:14:12 字数 638 浏览 1 评论 0原文

我真的对此感到沮丧。所以我正在用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();
}

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

原文

I am really getting frustrated with this. So I am making a slideshow with javascript but while all the images are being loaded I would like to show a buffering symbol..

here is the buffering symbol code.. if you have a better way of doing it please speak up.

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);
        }

that displays 3 images that make up a buffer animation.

my code for playing it until an image is loaded is this..

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

All that happens though is an infinite loop.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌逼全场 2024-12-28 21:14:12

尝试这样的事情：

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

Try something like this:

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

I'd probably just use a gif or css background sprites, setting src dynamically is probably the hackiest way to do this I've seen to date ;p

回复收藏 0 原文

罪歌 2024-12-28 21:14:12

这是一个递归 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);

Here's a recursive setTimeout version which I think is what you're looking for.

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);
}

And again, you'd stop this with