いつも参考にさせていただいています。今関わっているWebページのTOPには、カルーセルでバナーを表示しています。この読込み（？）が遅くてTOPページを開いた瞬間はバナー画像が縦に並んだ状態になってしまいます。カルーセルにはowlCarouselを使っています。画像を圧縮したり、他のプラグイン（slick）に変えてみたり、バナー画像にlazyloadを設定してみたりしたのですが効果はありませんでした。そこで、バナー画像のカルーセルが準備完了するまでローディング画像（ぐるぐるしてるやつ）を表示するようにしたいのですが・・・ぐるぐるの表示とfadeOut()は指定できたのですが、その後バナーをfadeIn()しても、縦に並んだ状態でfadeInされてしまいます。これは仕方ないのでしょうか？カルーセルの準備が完了したあとにfadeInさせるにはどうしたらいいでしょうか？ぐるぐる画像と入れ替わりでバナー画像を表示させたいです。実装しているソースは以下のようなものです。いい解決策があれば、ご回答お願いいたします。 css > .topBanner { > display:none; > } js > $(document).ready(function() { > $("#loading").fadeOut(); > $(".topBanner").fadeIn().owlCarousel({ > items : 1, > itemsDesktop : [1199,1], > itemsDesktopSmall : [980,1], > itemsTablet: [768,1], > itemsMobile : [479,1], > lazyLoad : false, > navigation : true, > responsive: true, > autoHeight : true, > autoPlay: 5500, > stopOnHover : true, > slideSpeed : 1000, > }); > }) html >

> >

> > >

> >

	@@ -1,1 +1,1 @@
1	- カルーセル　~~画像の読み込み~~を~~高速化~~したい
1	+ jQuery　fadeIn()の終了を待ってカルーセルを表示したい

質問編集履歴