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

同样，此代码似乎已被最小化（所有缩进都被删除，许多变量被重命名）。 我建议在最小化之前调试应用程序，因为将其最小化会使调试更加困难。 当所有功能都可以在任何地方正常运行时，您可以将其最小化并再次测试。