Question

我有开发的对话屏幕我计划每隔一毫秒更改背景图像，使其看起来像动画。我尝试使用jquery settimeout和setinterval，但是在小间隔内更改图像堆栈的方式会挂起浏览器，以及如何完成任务的任何想法。

function change_background(new_image_source) { 
    var myimage = $( '#spriteanim' );
    myimage.attr('src','style/images/Sprites/Screen1/'+new_image_source+'.png');
    console.log(myimage.attr('src'));
    timer = setTimeout( function () {
        new_image_source = new_image_source+1;
        change_background(new_image_source);
    }, 50);

    if(new_image_source>=10899){
        change_background(new_image_source);
        clearTimeout(timer);
    }
}

Answer 1

更改src属性永远不会按您的意愿工作。那是因为浏览器需要时间来加载图像。即使它被缓存，它仍然太慢，无法动画。我建议将您的图像组合成精灵并更改背景位置。你甚至可以用纯css过渡来做到这一点。

例如 - ＆gt; http://jsfiddle.net/krasimir/uzZqg/

HTML

<div class="image"></div>

CSS

.image {
    background: url('...');
    width: 200px;
    height: 200px;
    transition: all 4000ms;
    -webkit-transition: all 4000ms;
}
.image:hover {
    background-position: -500px 0;
}

您甚至可以使用keyframes。

以下是预装图片的方法http://jsfiddle.net/krasimir/DfWJm/1/

HTML

<div id="preloader"></div>

JS

var images = [
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg',
'http://www.australia.com/contentimages/about-landscapes-nature.jpg'    
];

var preloader = document.getElementById("preloader");
var preloadImages = function(callback) {
    if(images.length == 0) {
        callback();
        return;
    }
    var image = images.shift();
    var img = document.createElement("IMG");
    img.setAttribute("src", image);
    preloader.appendChild(img); 
    img.addEventListener("load", function() {
        console.log("image loaded");
        preloadImages(callback);
    });    
}

preloadImages(function() {
    // your animation starts here
    alert("Images loaded");
});

当然，您可以使用 display：none 隐藏 #preader div;

Answer 2

结帐http://spritely.net/

它将处理spritesheet动画的细节。我们设置FPS并控制播放。

Answer 3

我认为'每毫秒'有点太快了图像加载需要一些时间。我想，你应该在开始动画之前加载所有图像一次。这需要一些时间，因为您使用的图像数量似乎 10899 。并且每隔几毫秒就隐藏一个除了一个。 “几毫秒”，而不是“每毫秒”，应该完成你的工作。

更新：
为您的图片命名spriteanim0，spriteanim1 ......就像这样。加载完所有图像并且所有图像都已分配display: none后，请调用此js函数：

    var new_image_source1;
    function change_background(prev_image_source, new_image_source) {
        document.getElementById('spriteanim' + prev_image_source).style.display = 'none';
        document.getElementById('spriteanim' + new_image_source).style.display = 'block';
        if (new_image_source >= 10899)
            new_image_source1 = 0;
        else
            new_image_source1 = new_image_source + 1;
        window.setTimeout(
            function () {
                change_background(new_image_source, new_image_source1);
            },
            50);
    }

您可以尝试此操作，并根据需要相应地更改setTimeout间隔值。

将一系列背景图像更改为spritesheet

3 个答案: