JavaScript無法在Firefox v8中正確加載圖像-v11

Question

我正在連接攝影網站，並且在FF8到10中行為不穩定。

當我不時單擊站點上的縮略圖時，顯示圖像會在縮略圖的后面以及頁面的下方（幾乎不在站點內）加載。

我已經在許多其他瀏覽器中進行了測試，但只能在FireFox中進行復制。 在FF或OS X中更容易復制它，但是我聽說它在Windows 7的FF中也發生（但不經常發生）。

這是我目前的測試。

操作系統 -------- 瀏覽器 -------- 狀態

Win7 ------- IE 9 --------------
Win7 ------- Chrome 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

這是問題的屏幕截圖

問題是，這種情況太不穩定了，我不知道從哪里開始尋找問題。

以下是一些相關的代碼片段。

Java腳本

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的結尾。

同樣，此代碼似乎已被最小化（所有縮進都被刪除，許多變量被重命名）。 我建議在最小化之前調試應用程序，因為將其最小化會使調試更加困難。 當所有功能都可以在任何地方正常運行時，您可以將其最小化並再次測試。