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

这是问题的截图

问题是这太不稳定了，我不知道从哪里开始寻找问题。

这里有一些相关的sn-ps代码。

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 集异步更新。从图像的加载事件中执行与大小相关的事情应该可以工作。

规范中提出了一个问题，规范似乎不兼容网络，并且在https://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/bzbarsky@mozilla.com-7f8434f967df/try-macosx64/ 上构建的一些开发 Firefox 已更改行为以匹配此处的其他浏览器。可能值得在您的网站上进行测试，看看它们是否能解决问题。

Answer 2

在我看来，Firefox 没有等待您的文档加载，因此事件处理程序没有正确附加。

当我查看 Firefox 中的实际代码时，我看到了：

$(document).load()

什么时候应该：

$(document).ready()

接近site.js的结尾。

此外，这段代码似乎在某种程度上被最小化了（所有缩进被删除，许多变量被重命名）。我建议在最小化之前调试应用程序，因为最小化它会使调试变得更加困难。当它在任何地方都正常工作时，您可以将其最小化并再次测试。