スライダーを実装した場合、ページ遷移で画像がカクカクする

http://bqworks.com/slider-pro/
sliderproで、
fade効果にてスライダーを実装した場合、
ページ遷移で画像の大きさが一瞬おかしくなり、カクカクしてしまいます。

具体的に言うと、
--------------------------

実装されているトップページ表示（問題なし）
↓
下層ページへ遷移
↓
下層ページから、トップページへ遷移
（一瞬、スライダー画像全てが表示され、その後正常なスライダー表示に戻る）

--------------------------
という感じです。

自分なりに調べたところ、
どうやら大きなサイズの画像なので読込に時間がかかり、
そのタイムラグのせいでカクカクした感じで
元画像の小さな状態が一瞬表示される、
ということでした。

このような事象がある場合、
みなさまどのように対応されているのでしょうか？
sliderproで幅をサイト幅いっぱいに設定した場合は
下層からトップへ遷移した場合、
7枚のスライダー画像の２枚目が1秒近く表示されてしまい、
とてもお粗末な感じになってしまいます。

有識者の方、どうかお知恵を貸してください。
java scriptは自分で書けない初心者です。
どうかよろしくお願いいたします。

No.1 ベストアンサー 回答者： fufufunofufufu 回答日時： 2016/01/04 11:09

こんにちは。

こちらのスライダーはつかった事無いですが、別のプラグインスライダーで、
「スライダーを読み込みが終わるまでの間、非表示にする」という対応をしたことがあります。

①まずスライダーを適当なdivで囲む（※下記.slider_box）
<div class="slider_box">
<div id="slider1">
省略
</div>
</div>

②cssでslider_boxを非表示にする。
.slider_box{
visibility:hidden;
max-height: 300px;
/*max-heightはスライダーの高さです。リキッドだと思うのでmax-heightで指定
サイズ固定なら普通にheight指定でも良いです
高さを指定しないと、画像が縦に並ぶ状態で領域が縦長になり、読み込みが終わるまでに、非表示のままカクンとなると思います。*/
}

③HTMLのheadの最後あたりにjqueryで
「画像読み込み後に②のvisibilityをvisibleに変える」指示を書く。
書く場所は必ずここでなくても良いのですが、②のcss読み込みよりは後に置いてください。
またjqueryは$(function(){}とか$(document).readyとかで書くと実行タイミングが画像読み込み前になるので必ず下記の$(window).load(function(){}とかjavascriptのwindow.onloadなどで囲むようにしてください。

<script type="text/javascript">
$(window).load(function(){
$(".slider_box").css({
"visibility" : "visible"});
});
</script>

これで、画像読み込みが終わるまではスライダー自体が非表示（visibility:hidden;）になり、
読み込みが終わり次第表示（visibility:visible;）されると思います。
また非表示とは言ってもdisplay:noneだとうまく行きません。スライダー適用のHTML自体がないものとして扱われるため。なので、ここはvisibilityを利用します。

あとは好みで、非表示の間は読込中のローダーgif（くるくる回るやつ）とかを表示させても良いと思います。

頑張ってください。

この回答へのお礼

ご教授ありがとうございます！
visibilityの方なのですね。
まさにdisplay:noneで試してシーンだったので
さっそくに試してみます！
ありがとうございます！

お礼日時：2016/01/04 20:05