jQuery:setTimeoutを使用してHTMLや画像を遅らせて出力

HTMLで画像や出力データをアクセス時より遅らせて出力したり、処理をしたりしたい場合があります。

jQuerysetTimeoutを使用すれば、指定した時間の後に出力させることが可能です。


setTimeout

指定した時間(秒数)の後に処理を実行します。

$(function(){
	setTimeout(function(){
		// 処理を記載
	}, 2000);
});

setTimeoutの使用例

jQuery

1秒後に処理を実行します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    var str = '遅らせて出力する内容';

    // 1秒後に出力する
    setTimeout(function(){
        $('.output').append(str);
    }, 1000);

});
</script>

HTML

出力したい場所に下記のコードを記述します。

<div class="output"></div>

指定した時間の後に処理を実行できるので、重い画像や複雑な処理をするときなどに便利だと思います。