jQueryベースのAjaxを使って、自作の画像スライダーを制作しました。
.doneや.completeの後に画像を表示するようにfadeInを入れたのですが、画像がまだ完全に読み込まれる前に表示してしまうのであまりきれいではありません。(ローディングGIF画像は入れています)
そこで初回のアクセス時のみ5秒待ってから表示させる方法にし、思い通りの結果は得られたのですがあまりスマートとは言えないです。
画像が完全に読み込まれたら、fadeInを実行するにはどうしたらいいでしょうか?
function ajaxAction() { var loadFile = $('#switch-mode dd a.active').attr('href'); var url = location.href; $.ajax({ type: 'GET', url: loadFile, dataType: 'html' }).done(function(data){ $('#slider').append(data); sliderMotion(); }).complete(function(){ // If first time to visit the page. if (isFirstVisit) { setTimeout(function(){ $('#loading').remove(); $('#main-cont').fadeIn(1000); }, 5000); isFirstVisit = false; } else { $('#loading').remove(); $('#main-cont').fadeIn(1000); } }); }
回答2件
あなたの回答
tips
プレビュー