1

ドキュメントに800個の完全に適合したタイルを非常に高速に描画するJsスクリプトがあります。私の目標は、それらを1つずつ非常に高速に描画して、ローディング効果を作成することです。私はそれの開始速度が好きですが、100以降は遅くなり始めて退屈になります...解決策はありますか、それともjsでうまく機能しますか?

これがコードとライブデモです

var Gen_height=$(document).height()-21;
var Gen_width=$(document).width()-41;
var wid=Gen_width/40;
var hei=Gen_height/20;
var rot=40*20;

contrail();

var counter=0;

function contrail() {
    if (counter < rot) {
        $('body').append('<div id="box" style="width:' + wid + 'px; height:' + hei + 'px;"><div style="padding-top:15px;"><center>' + counter + '</center></div></div>');
        counter++
    }
    setTimeout(contrail, 0);
};
});
4

1 に答える 1

3

コメントで説明されているように、ユーザーのコンピューターのパフォーマンスにより、これは最善のアプローチではありません。div を作成し、たとえば次のように JQueryUI を使用してアニメーションで表示する必要があります: http://jsfiddle.net/rT5rL/13/

var $container = $('#container');
$container.hide();
while(counter <= rot) 
{
   $container.append('<div id="box" style="width:' + wid + 'px; height:' + hei + 'px;"><div style="padding-top:15px;"><center>' + counter + '</center></div></div>');
   counter++;
}

 $container.slideDown(1000);

その他のエフェクトはこちら: http://jqueryui.com/effect/#easing

$container.animate( { height: "show" }, 2000, 'easeInOutBounce');
于 2012-11-03T19:13:24.163 に答える