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

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

ただいまの
回答率

87.78%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,224
退会済みユーザー

退会済みユーザー

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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

$(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,
        afterInit: function(){
            $(window).load(function(){
                $("#loading").fadeOut().promise().done(function(){
                    $('.topBannerContainer').fadeIn();
                });
            });
        }
    });
});

Owl Carouselが対象要素をdisplay:block;にしてしまうようだったので
divを一つ追加しました(.topBannerContainer)
<div id="loading"><img src="/img/loading.gif"></div>
<div class="topBannerContainer" style="display: none;">
    <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>
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/25 12:45

    notableさん

    こんなオプションあったんですね!見落としていました。
    そしてやりたいことが実現できました~。ちゃんと用意が終わってからバナーが表示されるようになりました。

    でもやっぱり、owlCarouselの処理スピードが遅いような気がします。これはもう画像サイズとかの問題でしょうかね・・・
    もっとjquery使いこなせるようになりたいです。

    ご回答ありがとうございました!

    キャンセル

  • 2015/09/25 13:21

    解決してよかったです。

    Owl Carouselのdemoではそこまで遅いように感じられない
    (ページ表示後1秒以内に表示される)ので、
    それ以上に遅いのであれば別に原因がありそうです。

    Chromeのデベロッパーツールなどでファイル別に
    読み込みにかかった時間を見ることができるので、
    ネットワークの速度によるものなのか確認してみると良いかもです。
    参考:http://weback.net/utility/1491/

    キャンセル

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/24 10:56

    MineoOkudaさん

    ありがとうございます!
    でも、ん~、、、だめみたいです。「fadeIn()後にowlCarouselの処理がはじめる」という命令ですよね。owlCarouselの画像を縦から横に並べて等の処理の開始が後ろにずれただけになりますよね。裏でowlCarouselの処理をした後にバナーを表示させるにはこの考え方ではだめなのでしょうか。

    記載いただいた処理は、$(document).ready(function() {}) を書かずに$(window).on('load',function(){})を書き始めるのでしょうか?$("#loading").fadeOut();はこの中に一緒に書けばいいのでしょうか?

    質問ばかりですみません。よろしくお願いいたします。

    キャンセル

  • 2015/09/24 11: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 12:47

    なるほど。読み込みの開始時点をかえて対応するんですね。

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

    キャンセル

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

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る