http://bqworks.com/slider-pro/
sliderproで、
fade効果にてスライダーを実装した場合、
ページ遷移で画像の大きさが一瞬おかしくなり、カクカクしてしまいます。
具体的に言うと、
--------------------------
実装されているトップページ表示(問題なし)
↓
下層ページへ遷移
↓
下層ページから、トップページへ遷移
(一瞬、スライダー画像全てが表示され、その後正常なスライダー表示に戻る)
--------------------------
という感じです。
自分なりに調べたところ、
どうやら大きなサイズの画像なので読込に時間がかかり、
そのタイムラグのせいでカクカクした感じで
元画像の小さな状態が一瞬表示される、
ということでした。
このような事象がある場合、
みなさまどのように対応されているのでしょうか?
sliderproで幅をサイト幅いっぱいに設定した場合は
下層からトップへ遷移した場合、
7枚のスライダー画像の2枚目が1秒近く表示されてしまい、
とてもお粗末な感じになってしまいます。
有識者の方、どうかお知恵を貸してください。
java scriptは自分で書けない初心者です。
どうかよろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは。
こちらのスライダーはつかった事無いですが、別のプラグインスライダーで、
「スライダーを読み込みが終わるまでの間、非表示にする」という対応をしたことがあります。
①まずスライダーを適当な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で試してシーンだったので
さっそくに試してみます!
ありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- au(KDDI) 特定の画面を見るとスマホが固まります ご覧頂き有難うございます。 特定のページを見るとスマホが固まり 1 2023/08/21 19:29
- 工学 NFAからDFAの変換について 1 2022/05/28 01:45
- PHP php 確認表示画面で値をSESSIONから取り出す理由の解釈は正しいでしょうか? 1 2023/06/09 17:39
- 宇宙科学・天文学・天気 銀河のハビタブルゾーンを確率的セルオートマトンという数値的にシミュレーションした結果、「群島」の様な 2 2023/06/06 23:10
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- PowerPoint(パワーポイント) パワーポイントのアニメーションについて 4 2023/06/14 16:25
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Gifアニメ、最後のコマに行った...
-
スライダーを実装した場合、ペ...
-
複数の画像を先に読み込ませ表...
-
iframeからcolorboxの呼び出し
-
WEBページ立ち上げ時に1回のみ...
-
残像を残しながら別の画像に切...
-
表と裏がある1枚の画像を回転す...
-
透過pngの透明部分以外をクリッ...
-
始めに読み込む画像を固定して...
-
小窓について教えて下さい。
-
JavaScriptとチェックボックス...
-
MAX関数を使ってからLEFT JOIN...
-
画像の表示位置
-
ポップアップのソースの書き方...
-
JimdoでWebアイコンフォントの...
-
背景色を透明化
-
デフォルト非表示にしたい。【t...
-
window.openで値の渡し方を教え...
-
jspでcssが読み込めない
-
日替わりで画像を変更したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
javascriptで毎月替わる画像
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
スワップイメージが上手く動作...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
Gifアニメ、最後のコマに行った...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
各フォルダから1枚ずつ画像をラ...
-
画像を切り替えランダム表示
-
画像削除機能を付けたい
-
マウス追従スクリプトについて
-
画像ランダム表示、しかしダブ...
-
<table>、もしくは<iframe>内で...
-
1枚の画像をクリックすると複数...
-
画像とテキストのセットをラン...
おすすめ情報