2

コードにアニメーション GIF (読み込み中の画像) がある

Ajax呼び出しから変数「データ」でhtmlページを取得します。

$("#content").html(data); // takes about 5 seconds and the GIF animation freezes since IE is single threaded.

setTimeout / setInterval 関数を使用して 1 行ずつデータを書き込んで、スレッドが一瞬解放されてアニメーションが続行されるようにする方法はありますか?

フィドル URL: http://jsfiddle.net/deepakssn/Kp2bM/

私が試した代替ソリューション：

<style>
#loading {
        background: url(loading.gif) no-repeat center center #fff;
        display: block;
        position: fixed;
        height: 500px;
        width: 500px;
}
</style>
<script src="../scripts/jquery.js"></script>
<script>
$(window).load(function () {
    function writeData(data) {
        var yourLines = data.split("\n");
        for (var i = 0, j = yourLines.length; i < j; i++) {            
            var x = setTimeout(function() {                
                $("#content").append(yourLines[i]);
                console.log("Line No :"+[i]+" "+Date.now());                
            }, 5000);
        }        
    }
    function ajaxLoad() {
            $.ajax({
                    url: "test.txt"
            }).done(function (data) {                        
                    console.log("success"+Date.now());
                    writeData(data);
                    //$("#content").html(data);
                    console.log("loaded data"+Date.now());

            });
    }
    ajaxLoad();
});
</script>
<div id="loading"></div>
<div id="content"></div>
4

1 に答える 1

0

プロジェクトの 1 つに「読み込み中」インジケータを追加しているときに、この問題に遭遇しました。私はこれを使用して問題を解決しました。画像ではないのでフリーズしません。

于 2013-06-27T12:22:38.847 に答える