サムネイル画像をクリックするとメイン画像にそれを映し出し
そのメイン画像が指定した時間で薄っすらと表示されるような効果のイメージギャラリーをjQeryを使って制作しています。
jQueryバージョン:jquery-1.7.2.min.js
※(薄っすらと表示される効果:jqueryにてメイン画像のopacityを0→1)に変化させて実現しています
【問題点】
ローカルPC上でテストすると意図する動作をするのにサーバ上にデータをアップしてテストすると
メイン画像の移り変りにブラウザ起動後、初回サムネイルをクリックしたときのみ遅延が発生し、JqeryのfadeToも効きません。
何かjQueriのfadeto関係などソースに問題があるとか、これはキャッシュの問題で仕方ないとかあればご指導のほどよろしくお願いします。
【問題点詳細】
しかし、自分のパソコン内(ローカル環境)で動作させてみると意図したとおりになるのですが、
データをレンタルサーバ上にアップし、確認してみると、サムネイルをクリックすると
jqueryのfadetoの(opacityを0から1にする部分)動作がおかしくなります。
ブラウザを起動し初回サムネイルをクリックしたときのみ、メイン画像が前の残像が残り(遅延発生)し、fadetoの(opacityの変化)が聞かなくなります。
【状況整理】
1.どのPCでもローカル環境(自分のPC内)でテストすると意図する動作をする。
2.レンタルサーバ上だと、ブラウザを起動後、初回サムネイルをクリックしたときのみおかしい動作をする。(メイン画像の切り替わりに遅延が発生する(fadetoも効かない))
3.ブラウザを閉じない状態で、同じサムネイルをクリック(2回目)すると意図する動作をする。
※2.3を考えますと2回目以降クリックしたときに大丈夫なのは1回目クリックしたときに取得したメイン画像のキャッシュがブラウザに保存されているからだと思います。
またローカルだと大丈夫なのはメイン画像取得する時間(ダウンロードがない)から
じゃないかな?とも思います。
メイン画像に使っているそれぞれのファイルサイズは80KBと軽いです。
またIE 8/9でもfirefox12でも同じ状況です。
■HTMLソース(XHTML)
<div id="carousel">
<!--メイン画像-->
<div><img src="img/main.jpg" alt="" class="main_img"/></div>
<!--サムネイル画像-->
<div class="anyClass">
<ul>
<li><a href="img/photo1.jpg"><img src="img/photo1_thumb.jpg" alt="" /></a></li>
<li><a href="img/photo2.jpg"><img src="img/photo2_thumb.jpg" alt="" /></a></li>
<li><a href="img/photo3.jpg"><img src="img/photo3_thumb.jpg" alt="" /></a></li>
</ul>
</div>
</div>
■Javascript(jQuery)
$(function() {
$("#carousel .anyClass a").click(function(){
$("#carousel .main_img").css("opacity",0); ←いったんメイン画像のopacityを0に落とす
$("#carousel .main_img").attr("src",$(this).attr("href")); ←メイン画像のURLにセット
$("#carousel .main_img").fadeTo("normal",1); ←メイン画像のopacityを1に変化
return false;
});
});
No.1ベストアンサー
- 回答日時:
>【状況整理】
たぶんその通りで、
画像が読み込まれないままfade inしてるんじゃないでしょうか。
opacity:0から0.9くらいの状態で画像が読み込まれていないと、全く表示されません。
そのままopacity:1になり、その後で画像が読み込まれると、opacity:1の状態で表示されますから、
fade inが効いていないように見えます。
リサイズや移動などでも同じですが、画像の読み込みを待つようにしてみてはいかがでしょうか。
低レベル(ライブラリ未使用)の書き方は、以下のような感じで行けると思います。
var img=document.createElement('img');
img.onload=function(){ /*表示処理*/ $("#carousel .main_img").attr("src", this.src); };
img.setAttribute('src', 'img/photo1.jpg');
なお、IEはsrcの書き換えではonloadイベントを再発行しません。
img要素を作るのはその対策です。
jQueryを使った書き方はわかりませんので、質問者さんか、他の人にお任せします。
もしくは、thickboxなどには画像の読み込みを待つ処理が書いてあると思いますし、それが参考になると思います。
大きなヒントありがとうございました。
画像の読み込みにタイムラグがあるのが原因とわかり、
ページが表示されたらメインに映し出す画像をjavascriptのプリロードすることで実装できました。
これでタイムラグがなくなりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
img要素のalt属性の文字列は検...
-
フォルダ内の画像をウェブでラ...
-
背景が透明なリンクボタンで、...
-
<IMG SRC=" " ALT=" ">のテキス...
-
jQueryのfadeToの動きが変(サ...
-
拡張子無しで画像を表示したいです
-
ボタンクリックでボタン画像を...
-
PDFの保存ボタンが表示されません
-
ロゴマークだけを抜き取って貼...
-
background-sizeでcontainする...
-
画像の上に文字を乗せたい!
-
pictbearで消しゴムを使って透...
-
Illustratorの書類に埋め込まれ...
-
画像の透過処理の仕方をおしえ...
-
素材の直リンク
-
Fireworksでpng-24で書き出すに...
-
画像の背景(白になってしまう...
-
リストビューのTextBackground...
-
PowerDirectorでバックで曲が流...
-
画像貼り付け、URLに飛べる軽い...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
スライドショーの上にロゴマー...
-
背景が透明なリンクボタンで、...
-
クリッカブルMAP領域が分かる様...
-
タイトルバーに画像を入れるHTM...
-
バナーの貼り方とバナーにリン...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
フォルダ内の画像をウェブでラ...
-
期間ごとに画像表示を切り替え...
-
pngやjsの後ろの英数字の意味は...
-
onmouseoverに複数の命令を書き...
-
「DecareステートメントにPtrSa...
-
リンク先にしているページを小...
-
画像クリックでクリップボード...
-
IE11にてonclickの動作不良
-
[twip]から[pixel]への変換
-
HTMLだけで画像をクリックして...
-
アルバムをめくるように、画像...
おすすめ情報