的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结束。此外，该代码似乎有些最小化（所有缩进被删除，许多变量被重新命名）。我建议在最小化之前调试应用程序，因为最小化它会使调试困难得多。当它在所有地方正常工作时，您可以将其最小化并再次测试。