質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3951閲覧

jQuery fadeIn()の終了を待ってカルーセルを表示したい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/09/18 04:15

編集2015/09/18 08:42

いつも参考にさせていただいています。

今関わっている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

<div id="loading"><img src="/img/loading.gif"></div> <div class="topBanner"> <a href="/page1.ctp"> <img src="/img/bnr1.jpg"> </a> <a href="/page2.ctp"> <img src="/img/bnr2.jpg"> </a> <a href="/page3.ctp"> <img src="/img/bnr3.jpg"> </a> </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

afterInitというオプションで初期化後の処理を定義できるようなので、
次のようにすると目的の動作が実現できそうな気がします。
一度試してみてください。

JavaScript

1$(function() { 2 $(".topBanner").owlCarousel({ 3 items : 1, 4 itemsDesktop : [1199,1], 5 itemsDesktopSmall : [980,1], 6 itemsTablet: [768,1], 7 itemsMobile : [479,1], 8 lazyLoad : false, 9 navigation : true, 10 responsive: true, 11 autoHeight : true, 12 autoPlay: 5500, 13 stopOnHover : true, 14 slideSpeed : 1000, 15 afterInit: function(){ 16 $(window).load(function(){ 17 $("#loading").fadeOut().promise().done(function(){ 18 $('.topBannerContainer').fadeIn(); 19 }); 20 }); 21 } 22 }); 23});

Owl Carouselが対象要素をdisplay:block;にしてしまうようだったので
divを一つ追加しました(.topBannerContainer)

HTML

1<div id="loading"><img src="/img/loading.gif"></div> 2<div class="topBannerContainer" style="display: none;"> 3 <div class="topBanner"> 4 <a href="/page1.ctp"> 5 <img src="/img/bnr1.jpg"> 6 </a> 7 <a href="/page2.ctp"> 8 <img src="/img/bnr2.jpg"> 9 </a> 10 <a href="/page3.ctp"> 11 <img src="/img/bnr3.jpg"> 12 </a> 13 </div> 14</div>

投稿2015/09/24 02:44

notable

総合スコア415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/09/25 03:45

notableさん こんなオプションあったんですね!見落としていました。 そしてやりたいことが実現できました~。ちゃんと用意が終わってからバナーが表示されるようになりました。 でもやっぱり、owlCarouselの処理スピードが遅いような気がします。これはもう画像サイズとかの問題でしょうかね・・・ もっとjquery使いこなせるようになりたいです。 ご回答ありがとうございました!
notable

2015/09/25 04:21

解決してよかったです。 Owl Carouselのdemoではそこまで遅いように感じられない (ページ表示後1秒以内に表示される)ので、 それ以上に遅いのであれば別に原因がありそうです。 Chromeのデベロッパーツールなどでファイル別に 読み込みにかかった時間を見ることができるので、 ネットワークの速度によるものなのか確認してみると良いかもです。 参考:http://weback.net/utility/1491/
guest

0

$(window).on('load',function(){ $(".topBanner").fadeIn('slow',function(){ $(this).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, }); }) })

こうですかね?

http://js.studio-kingdom.com/jquery/effects/fade_in
jQueryのアニメーション系の関数にはcallbackが用意されています。
アニメーション終了後に実行される関数を指定してあげるとうまくいくと思います。

投稿2015/09/18 09:50

編集2015/09/18 09:52
MineoOkuda

総合スコア89

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/09/24 01:56

MineoOkudaさん ありがとうございます! でも、ん~、、、だめみたいです。「fadeIn()後にowlCarouselの処理がはじめる」という命令ですよね。owlCarouselの画像を縦から横に並べて等の処理の開始が後ろにずれただけになりますよね。裏でowlCarouselの処理をした後にバナーを表示させるにはこの考え方ではだめなのでしょうか。 記載いただいた処理は、$(document).ready(function() {}) を書かずに$(window).on('load',function(){})を書き始めるのでしょうか?$("#loading").fadeOut();はこの中に一緒に書けばいいのでしょうか? 質問ばかりですみません。よろしくお願いいたします。
MineoOkuda

2015/09/24 02:05

では、 $(".topBanner").owlCarousel({ ... は$(document).ready(function(){})内に。 $(window).on('load',function(){})内に $(".topBanner").fadeIn('slow') を記述してみてはどうですか? $(document).ready()はページ読み込み前に、 $(window).on('load',function(){})は読み込み完了後に実行されます。 //$(document).readyは以下のように省略して書けます。 $(function(){ $(".topBanner").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, }); //ページ読み込み完了時に実行 $(window).on('load',function(){ $(".topBanner").fadeIn('slow'); }); })
退会済みユーザー

退会済みユーザー

2015/09/25 03:47

なるほど。読み込みの開始時点をかえて対応するんですね。 んー、これでもやっぱり画像が全部ページ上に展開されてからスライドしてしまいました。 他の方の回答で、owlCarouselのオプション使用して解決できたので終了としたいと思います。 もっともっとjqueryを使いこなせるようがんばります。ご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問