開発中のWebサイトでかなり大きな背景イメージを使用しています。現在、背景色が読み込まれ、画像の読み込みが完了すると、読み込まれます。それは完璧です。しかし、私はプリローダーのGIFは背景画像が読み込まれるまで回転し、その後、フェードイン効果を実現しようとしています。現在、ここに(すべてで働いイマイチ)私のjQueryのですシングルイメージJqueryプリローダー
$(document).ready(function(){
$('span.loader').show();
$("body").css('background-image','url(images/bg.jpg)').ready(function(){
$("span.loader").hide();
});
});
このありえないが、私が欲しいものをやって - 背景色を表示し、ローダーをspan.loader
に表示します。ボディーの背景イメージがロードされたら、フェードイン(ローダーの上かローダーを隠すか)したい。何か案は?それを解剖多くの時間を費やすことなく、
body{background:url(images/bg.jpg) 50% 0 no-repeat #e6f8bb; font-family:'Arvo'; sans-serif;}
span.loader{position:absolute; top:39px; left:484px;height:31px; width:31px; background-image:url(images/loader.gif); display:none;}
私は本当にこのアイデアが好きです...しかし、bodyクラスが "loaded"クラスに割り当てられていなかったため、divクラスの露呈は0の不透明度に戻ってアニメーション化されていないようです。クラスが追加されない理由は何ですか? – JCHASE11
なぜfadeOut(function(){$(this).remove()})をしないのですか?代わりに? – Groovetrain
はい、問題はありませんが、ロードされている場合でも背景イメージはロードされていません。ロードされたクラスが割り当てられていないためです...もしあなたがアイデアを持っていなければ、一緒にjsfiddleを入れます – JCHASE11