-1

我要开发对话屏幕，我计划每毫秒更改一次背景图像，使其看起来像动画。我尝试使用 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);
    }
}
4

3 回答 3

1

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

例如-> 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;
}

您甚至可以使用关键帧。

以下是如何预加载图像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隐藏#preloader div ；

于 2013-08-30T05:42:35.973 回答
0

结帐http://spritely.net/

它将处理精灵表动画的细节。让您设置 FPS 并控制播放。

于 2013-08-30T05:37:52.553 回答
0

我认为“每毫秒”有点太快了。
图像加载需要一些时间。我认为，您应该在开始动画之前加载所有图像一次。这需要一些时间，因为您使用的图像数量似乎是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您可以尝试此操作并根据需要相应地更改间隔值。

于 2013-08-30T05:41:23.593 回答