的Javascript不加載正確的圖像在Firefox V8 - V11

Question

我連線了一個攝影網站，我通過10

具有FF8的古怪行爲。當我通過縮略圖點擊網站上，每隔一段時間一段時間後，顯示圖像會加載在縮略圖後面以及頁面的下方（幾乎不在現場）。

我在其他一些瀏覽器中測試過，我只能在FireFox中重現它。它更容易在FF或OS X中複製，但我被告知在Windows 7中FF也會發生（但不太常見）。

這是我目前的測試。

OS -------- 瀏覽器 -------- 狀態

Win7的------- IE 9 ----- ---------
Win7的-------鉻17 -----
Win7的-------火狐10 -----
Win7的 - ------ FireFox 11 -----
OS X ------- Chrome 17 -----
OS X ------- Safari 5 ----------
OS X ----- - 火狐8 -------
OS X -------火狐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> 

我意識到問題有點長，但如果任何人都可以就這種情況發生的原因提供一些建議，我很樂意聽到你的想法。

Answer 1

您在圖像上設置了.src，並立即嘗試讀取其尺寸（在centerMe）。根據Firefox實施的當前HTML5規範文本，維度將從src集合異步更新。從圖像的加載事件做大小相關的東西應該工作。

規範中提出的一個問題是，該規範似乎並未與Web兼容，並且Firefox在https://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/bzbarsky@mozilla.com-7f8434f967df/try-macosx64/上構建的某些發展已將行爲更改爲與其他瀏覽器匹配。可能值得對您網站上的人進行測試，看他們是否解決了這個問題。

Answer 2

在我看來，Firefox並沒有等待您的文檔加載，因此事件處理程序沒有正確地連接。

當我看到在Firefox中實際的代碼，我看到：

$(document).load() 

當它應該是：

$(document).ready() 

附近的site.js結束。此外，該代碼似乎有些最小化（所有縮進被刪除，許多變量被重新命名）。我建議在最小化之前調試應用程序，因爲最小化它會使調試困難得多。當它在所有地方正常工作時，您可以將其最小化並再次測試。