-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 属性を変更しても、思い通りには機能しません。これは、ブラウザが画像をロードするのに時間がかかるためです。キャッシュされていても、アニメーションにはまだ遅すぎます。画像をスプライトに結合し、background-positionを変更することをお勧めします。純粋な 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");
});

もちろん、#preloader div をdisplay: noneで非表示にすることもできます。

于 2013-08-30T05:42:35.973 に答える
0

「ミリ秒ごと」は少し速すぎると思います。
画像の読み込みに時間がかかります。アニメーションを開始する前に、すべての画像を一度ロードする必要があると思います。使用している画像の数は10899のようですので、しばらく時間がかかります。そして、数ミリ秒ごとに1つを除くすべてを非表示にします。「ミリ秒ごと」ではなく、「数ミリ秒」があなたの仕事をするはずです。

更新：あなたの画像に
名前を付けてください...このように。すべての画像が読み込まれ、すべてが割り当てられたら、次の js 関数を呼び出します。 spriteanim0spriteanim1display: none

    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 に答える