私は写真撮影のウェブサイトをアップ配線だし、私はすべて一度、サイト上のサムネイル画像を通じてクリックすると、私は10Javascriptが正しくFirefoxのV8に画像を読み込まない - V11
を通じてFF8で不安定な動作を抱えていますしばらくの間、サムネイルの背後に表示画像がロードされるだけでなく、ページの遠くに（実際にはほとんど外に）ロードされます。
私は他のブラウザでテストしましたが、私はFireFoxでしか再現できません。それはFFやOS Xでより簡単に再現されますが、Windows 7のFFでも起こると言われています。
私の現在のテストです。
OS -------- ブラウザ -------- ステータス
Win7の------- IE 9 ----- ---------
win7の-------クロム17 -----
win7の------- FireFoxの10 -----
win7の - ------ FireFox 11 -----
OS X ------- Chrome 17 -----
OS X ------- Safari 5 ----------
OS X ----- - Firefoxの8 -------
OSのX -------ここ
FireFoxの11 -----は、ステージングサイト http://captures.infinitas.ws
だとここです問題のスクリーンショット
問題はこれが非常に不安定で、どこで問題を探すのかわからないということです。
コードの関連するスニペットを次に示します。
Javascriptを
function centerMe(img, show, container) {
var img$ = $(img);
container = container || img$.parent();
var deltaW = Math.round((container.width() - img.width)/2);
var deltaH = Math.round((container.height() - img.height)/2);
img$.css({top: deltaH, left: deltaW});
if (show) {
img$.css("visibility", "visible");
}
}
$(document).ready(function(){
var imgs = [];
$('a.thumb').each(function() {
var img = new Image();
img.src = this.href;
imgs.push(img);
}).click(function() {
var container = $("#gallery > div");
var oldImg = container.find("img");
var img = new Image();
img.src = this.href;
var newImg = $(img).hide();
container.append(img);
centerMe(img, false, container);
oldImg.stop(true).fadeOut(500, function() {
$(this).remove();
});
newImg.fadeIn(500);
return false;
});
});
スタイルシート
#content
{
position: relative;
width: 1160px;
}
#gallery
{
position: absolute;
width: 1160px;
}
#gallery > div
{
position: relative;
width: 800px;
height: 600px;
text-align:center;
vertical-align:middle;
}
#gallery > div > img
{
position: absolute;
}
/*Gallery Navigation*/
#gallery > ul
{
position: absolute;
display: inline-block;
margin: 0;
padding: 0;
list-style-type: none;
vertical-align: top;
width: 320px;
top: 0;right: 0;
}
#gallery > ul > li
{
list-style-type: none;
display: inline-block;
vertical-align: top;
letter-spacing: normal;
padding-top: 3px;
}
HTML
<div id="gallery">
<div>
<img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg"
onload="centerMe(this, true)" style="visibility: hidden" />
<noscript>
<img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg" />
</noscript>
</div>
<ul>
<li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/L/CAP0029-L.jpg"
target="_blank">
<img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-nTz8mLX/0/Ti/CAP0029-Ti.jpg" /></a></li>
<li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-Hp2qmZC/0/L/CAP0284-copy-L.jpg"
target="_blank">
<img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-Hp2qmZC/0/Ti/CAP0284-copy-Ti.jpg" /></a></li>
<li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-qG9wB77/0/L/CAP0167-L.jpg"
target="_blank">
<img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-qG9wB77/0/Ti/CAP0167-Ti.jpg" /></a></li>
<li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-ZxNk2zh/0/L/CAP0097-L.jpg"
target="_blank">
<img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-ZxNk2zh/0/Ti/CAP0097-Ti.jpg" /></a></li>
<li><a class="thumb" href="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-j6tmqHJ/0/L/amanda-005-L.jpg"
target="_blank">
<img src="http://captures.smugmug.com/Portfolio/Weddings-Couples/i-j6tmqHJ/0/Ti/amanda-005-Ti.jpg" /></a></li>
</ul>
</div>
私は質問を実現長いことですが、なぜこれが起こっているのかについて誰かが助言を与えることができれば、私はあなたの考えを聞きたいです。
"ready"ハンドラの代わりに '$（document）.load（）'ハンドラで初期化を行うとどうなりますか？すべての画像（など）がロードされるまで、「ロード」イベントは発生しません。 – Pointy
@Pointy '.ready'を' .load'に変更すると、イメージはスワップしません。彼らはちょうど新しいブラウザウィンドウに読み込まれます。 –
@ChaseFlorell - '$（document）.load（）'ではなく '$（window）.load（）'でしたが、とにかくそれが問題であると疑うことがあります。 – jfriend00