2

さて、私はいくつかのアニメーションをしようとしています。これがテストページです。

かなりの量のコードがあり、それはすべて関連性があると思うので、ここに貼り付ける価値はないかもしれません。関数定義を投稿できます：

var ImageLoader = function(c,imagelist,oncomplete) {
    var l = 0, imgs = [], i, loaded = 0;
    for( i in imagelist) {
        l++;
        imgs[i] = new Image();
        imgs[i].style.position = "absolute";
        imgs[i].style.left = "100%";
        c.appendChild(imgs[i]);
        imgs[i].onload = function() {
            loaded++;
            if( loaded == l) oncomplete(imgs);
        };
        imgs[i].onerror = function() {
            alert("Failed to load "+this.src);
        };
        imgs[i].src = imagelist[i];
    }
};
var img2bg = function(c,img) {
    var d = document.createElement('div');
    d.style.width = img.width+"px";
    d.style.height = img.height+"px";
    d.style.backgroundImage = "url('"+img.src+"')";
    d.style.position = "absolute";
    d.style.left = "100%";
    c.appendChild(d);
    return d;
};
var Animate = function(callback,time,thenwhat) {
    var start = new Date().getTime();
    var timer = window.setInterval(function() {
        var now = new Date().getTime();
        var pos = Math.min(1,(now-start)/time);
        if( callback) callback(pos);
        if( pos == 1) {
            clearInterval(timer);
            if( thenwhat) thenwhat();
        }
    },25);
};

ただし、前述したように、これだけではおそらくあまり役​​に立ちません。

とにかく、要点を言えば、このアニメーションはIE9、IE10、Chrome、Firefoxで完全に機能します...しかし、IE8と7では悲惨に失敗します。

のコールバック関数で、 2つの特定の画像ImageLoaderを呼び出します。img2bgしかし、何らかの理由で、関数は画像の1つに対して2回呼び出され、2番目の引数がまったくない状態で4〜5回呼び出されています。スクリプト全体に文字通り他の呼び出しはありませんがimg2bg、何が得られますか？

4

2 に答える 2

0

この問題の「解決策」は、アニメーションを機能検出してオプションにすることです。これにより、古いブラウザはアニメーションをスキップしたり、より単純なものを再生したりできます。

于 2012-12-20T04:01:52.817 に答える
0

使用しようとしているすべての機能がIE7/8で機能することを確認しますか？使用しない不透明度を使用します。私は背景の位置がせいぜいバグだったことを知っています。html5 doctypeを使用しているので、それがhtml5要素またはAPIも使用している可能性があるかどうかはわかりません。これが問題がそこにあると私に思わせるものです。

于 2012-12-18T05:15:17.413 に答える