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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

9035閲覧

再読み込みしないと画像が表示されない

mz_nagasaki

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/06/30 03:18

編集2022/01/12 10:55

jsを使ってコーディネートの画像にマウスオンするとテキストがスライド表示されるのですが、
たまにサイトを再読み込みしないと画像を読み込まないことがあります。
原因と解決方法はありますでしょうか??

``![イメージ説明]WIDTH:600<html>

<link href="http://shop.menz-style.com/u/pc/css/style.css" rel="styleSheet" type="text/css"> <link type="text/css" rel="stylesheet" href="http://shop.menz-style.com/u/pc/css/pagedesign/common/default.css"> <style> .contenthover { padding:20px 20px 10px 20px; } .contenthover, .contenthover h3, contenthover a { color:#fff;font-size: 16px; } .contenthover h3, .contenthover p { margin:0 0 10px 0; line-height:1.9em; padding:0; } .contenthover h3 { padding-bottom: 10px;} .contenthover a.mybutton { display:block; float:left; padding:5px 10px; background:#3c9632; color:#fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .contenthover a.mybutton:hover { background:#34742d } </style> <script type="text/javascript" src="http://shop.menz-style.com/u/pc/js/renewal2014/jquery.backslash.js" charset="utf-8"></script> <script> $(function(){ $('.d3').contenthover({ overlay_width:300, overlay_height:300, effect:'slide', slide_direction:'right', overlay_x_position:'right', overlay_y_position:'bottom', overlay_background:'#000', overlay_opacity:0.8 }); }); </script> <!-- ▼コーディネート▼ --> <div><img src="http://shop.menz-style.com/u/freeimages/item/2015/100-521n1341-2set-5.jpg" alt="" class="photo d3" /> <div class="contenthover"> <h3>ネイビーコーディネート</h3> <p> ネイビーカラーのシャツジャケットには9分丈のデニムパンツを!テーラードジャケットのディテールをしているシャツなので、コーディネートが ビシッとキマります! </p> </div> </div> <!-- ↓画像リンク1列8アイテム↓ --> <p class="spn"> <a href="http://shop.menz-style.com/coordinate/ajax?coordination_id=12912&keepThis=true&TB_iframe=true&width=820&height=615" class="thickbox"> <img src="http://shop.menz-style.com/u/freeimages/banner-promotion/2014/coordinatematomekai_senter.jpg" alt="まとめ買い" class="photo" /></a> <img src="http://shop.menz-style.com/u/freeimages/item/2013/item.jpg" alt="コーディネート" class="photo" /> </p> <p class="pcn"> <a href="http://shop.menz-style.com/coordinate/detail?coordination_id=12912&m=coordinate_btn" class="thickbox"> <img src="http://shop.menz-style.com/u/freeimages/banner-promotion/2014/coordinatematomekai_senter.jpg" alt="まとめ買い" class="photo" /></a> <span>■モデル着用アイテム■</span> ▼気になるアイテムをタップ▼ </p> <div class="mb100"> <ul class="var15_newItemList i6"> <!-- ※アイテム数が6点or7点の場合「i5」を「6点 = i6」 「7点 = i7 」 に置換。 それ以外は全て「i5」--> <li><a href="#cart"><img src="http://shop.menz-style.com/printimage.php?id=100-521n1341-2set.nav.-_2&w=100&h=126" border="0" alt="麻混シャツジャケット×杢デザインVネック半袖カットソー 2点セット" /></a></li> <li class="spn"><img src="http://shop.menz-style.com/printimage.php?id=plus_0.-_2&w=100&h=126" border="0" alt="" /></li> <li><a href="http://shop.menz-style.com/item/detail?item_code=39-55-H701#head" target="_blank"><img src="http://shop.menz-style.com/printimage.php?id=39-55-h701.nav.-_2&w=100&h=126" border="0" alt="ヴィンテージ加工9分丈デニム" /></a></li> <li><a href="http://shop.menz-style.com/item/detail?item_code=80-BR890#head" target="_blank"><img src="http://shop.menz-style.com/printimage.php?id=80-br890.dbrw.-_2&w=100&h=126" border="0" alt="ローカット切り替えデザインシューズ" /></a></li> <li><a href="http://shop.menz-style.com/item/detail?item_code=ARNE-002#head" target="_blank"><img src="http://shop.menz-style.com/printimage.php?id=arne-002.slv.-_2&w=100&h=126" border="0" alt="キーリングデザインネックレス" /></a></li> <li><a href="http://shop.menz-style.com/item/detail?item_code=23-528-IL#head" target="_blank"><img src="http://shop.menz-style.com/printimage.php?id=23-528-il.cam.-_2&w=100&h=126" border="0" alt="イタリアンレザーブレスレット" /></a></li> <li><a href="http://shop.menz-style.com/item/detail?item_code=37-MZS-BR-019#head" target="_blank"><img src="http://shop.menz-style.com/printimage.php?id=37-mzs-br-019.slv.-_2&w=100&h=126" border="0" alt="クロスリングコードブレスレット" /></a></li> </ul> </div> <!-- ↑画像リンク1列8アイテム↑ --> <!-- ▲コーディネート▲ -->
![イメージ説明][WIDTH:600](6dd1308d![イメージ説明][WIDTH:600](36ac0a61debbe8ec49778cb64ac7c45b.png)説明][WIDTH:600](4df4a3d27ea6175b9e17939ec66e3fbf.png)説明][WIDTH:600](86cc0ccc8e4ccf9ef5eb2d55e619fd30.png)説明][WIDTH:600](2956b2616416c655dce82523a5cd9eb2.png)4d73b7b11ed6a67ba4.png)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

image要素にdisplay:noneが動的に加えられてしまってますね。
簡易的にやるならjQueryが入っているので

lang

1$(function(){ 2$('img').css('display','') 3});

を該当ページに書いてやれば多分大丈夫なのですが、セレクタに気をつけないといらぬものまで見えちゃいますね。

ただし、根本の解決にはなっていないのでdisplay:noneにしている箇所を解決しないとダメだと思います。

投稿2015/06/30 07:46

JunTomizawa

総合スコア248

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mz_nagasaki

2015/07/01 05:59

同じ画像のhtmlが重複しており、片方がdisplay:noneの設定されているため、解除してしまうと通常に表示されているものと両方表示されてしまいました。。。
JunTomizawa

2015/07/01 07:36

それでしたら、その画像を回避してやれば大丈夫なのですがどの画像ですかね?
mz_nagasaki

2015/07/03 05:25

返答ありがとうございます。 シンプルにhtmlに画像のサイズ指定を入れたら解決しました。 最初の読み込みでサイズが0で読み込んでいたみたいです。 ありがとうございました。
guest

0

サイト見てみたのですが、原因の前に現象が置きなくて。。。
現象が起きるタイミングはどういった時ですかね?

画像の書き出しもPHPで行っているみたいですので表側の問題より、裏側の問題のような気もします。

投稿2015/06/30 04:32

JunTomizawa

総合スコア248

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mz_nagasaki

2015/06/30 06:53

ご回答ありがとうございます! コーデ画像が表示されない現象を追記しましたのでご確認頂ければと思います。 URLの後ろに&○○などパラメータが振ってあるとたまになるみたいですm(__)m 直接URLを入力するとならないのですが・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問