0

javascript を使用した画像など、データの非同期ロードを行うときに常に発生する大きな質問があります。過去に、何かが進行中であることをユーザーに示すためにローダーを配置しました。ただし、データの読み込み中は、画像が適切にアニメーション化されません。常にバッキングしていますが、Firefox ブラウザーでのみです。

回転などの css3 アニメーションにも同じ問題があります。

なぜそれが起こっているのですか？

var imgUrl = 'http://photojournal.jpl.nasa.gov/jpeg/PIA13932.jpg';
var aImagesToLoad = [];
var iLoaded = 0;
var runs = 3;

$(document).on('click', 'a#init-load', function(event) {
    event.preventDefault();
    if (confirm('A big image is loaded three times now')) {
        var i, j;
        var self = $(this);

        self.fadeOut(500);  
        $('img').addClass('show');

        for ( i = 0; i < runs; i += 1) {
            var ts = new Date().getTime();

            aImagesToLoad.push(new Image());
            aImagesToLoad[aImagesToLoad.length - 1].onload = function(load) {
                iLoaded += 1;

                if (iLoaded === runs - 1) {
                    $('img').removeClass('show');
                    self.fadeIn(500);
                }
             };

             aImagesToLoad[aImagesToLoad.length - 1].src = imgUrl + '?uq=' + (ts + i);
         }
    }
});

ajaxloaderの画像(アニメーションgif)とcssの回転アニメーションでjsfiddleを作りました。テストできる場所。

4

1 に答える 1

0

ハードウェア アクセラレーション レンダリングを開始するように、スタイルシートにtransalte3d(0,0,0)を追加する必要があります。

たとえば、試してみてください：

transform: scale(1) rotate(359deg) translate3d(0,0,0.1);

translate3d()プロパティは、アニメーションをスムーズにするためにハードウェア アクセラレーションを使用するようブラウザに指示します。

#css-ajaxloader {
    transform: scale(1) rotate(0deg) translate3d(0,0,0.1);
}

また、ブラウザが他のスケールを継承しないように、デフォルトでスケールを指定します..デフォルト値の1でスケールが必要なため..通常のサイズ

Zを0.1に追加すると、ブラウザがサポートしている場合、ハードウェア アクセラレーションが開始されます。

それを試してください

于 2013-10-17T16:32:38.277 に答える