いつも参考にさせていただいています。
今関わっている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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/09/25 03:45
2015/09/25 04:21