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

这是问题的截图

enter image description here

问题在于，这种情况非常不稳定，以至于我不知道从哪里开始寻找问题。

以下是一些相关的代码片段。

的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不兼容，并且在https://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/bzbarsky@mozilla.com-7f8434f967df/try-macosx64/处有一些开发版Firefox构建，其行为已更改为与此处的其他浏览器相匹配。可能值得测试您网站上的用户，看看他们是否解决了这个问题。

Javascript无法在Firefox v8 - v11中正确加载图像

1 个答案: