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

Question

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列８アイテム↓ --> <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="麻混シャツジャケット×杢デザインＶネック半袖カットソー ２点セット" /></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="ヴィンテージ加工９分丈デニム" /></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列８アイテム↑ --> <!-- ▲コーディネート▲ -->

![イメージ説明][WIDTH:600](6dd1308d![イメージ説明][WIDTH:600](36ac0a61debbe8ec49778cb64ac7c45b.png)説明][WIDTH:600](4df4a3d27ea6175b9e17939ec66e3fbf.png)説明][WIDTH:600](86cc0ccc8e4ccf9ef5eb2d55e619fd30.png)説明][WIDTH:600](2956b2616416c655dce82523a5cd9eb2.png)4d73b7b11ed6a67ba4.png)

Answer 1

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

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

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

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

Comments

[mz_nagasaki]

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

[JunTomizawa]

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

[mz_nagasaki]

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

Answer 2

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

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

Comments

[mz_nagasaki]

ご回答ありがとうございます！
コーデ画像が表示されない現象を追記しましたのでご確認頂ければと思います。

URLの後ろに&○○などパラメータが振ってあるとたまになるみたいですm(__)m
直接URLを入力するとならないのですが・・・