的Javascript不加载正确的图像在Firefox V8 - V11
我连线了一个摄影网站,我通过10的Javascript不加载正确的图像在Firefox V8 - V11
具有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>
我意识到问题有点长,但如果任何人都可以就这种情况发生的原因提供一些建议,我很乐意听到你的想法。
您在图像上设置了.src
,并立即尝试读取其尺寸(在centerMe
)。根据Firefox实施的当前HTML5规范文本,维度将从src集合异步更新。从图像的加载事件做大小相关的东西应该工作。
规范中提出的一个问题是,该规范似乎并未与Web兼容,并且Firefox在https://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[email protected]/try-macosx64/上构建的某些发展已将行为更改为与其他浏览器匹配。可能值得对您网站上的人进行测试,看他们是否解决了这个问题。
谢谢你。我可能会尝试img onload方法。 – 2012-03-19 03:09:57
hrm。我尝试在'ready'子句中包装'centerMe(img,false,container);'一直到'newImg.fadeIn(500);''$(img)ready(function(){.. 。});'没有成功。 – 2012-03-19 03:32:01
或者我已经读了一点。这似乎已经修复了它$(img).load(function(){' – 2012-03-19 03:36:08
在我看来,Firefox并没有等待您的文档加载,因此事件处理程序没有正确地连接。
当我看到在Firefox中实际的代码,我看到:
$(document).load()
当它应该是:
$(document).ready()
附近的site.js
结束。此外,该代码似乎有些最小化(所有缩进被删除,许多变量被重新命名)。我建议在最小化之前调试应用程序,因为最小化它会使调试困难得多。当它在所有地方正常工作时,您可以将其最小化并再次测试。
我已经将.ready换成.load,只是为了测试@Perryy的理论。我已经把它放回去了。 – 2012-03-18 19:03:59
这对我来说效率很低。我正在调试你正在尝试的一些暂时的事情。如果你打算使用'.load()',它应该是'$(window).load()',而不是'$(document).load()'。那么,现在你想让我去尝试一遍又一遍的调试呢? – jfriend00 2012-03-18 19:05:51
@ChaseFlorell - 您的网页现已损坏,无法在任何浏览器中使用。现在无法调试。 – jfriend00 2012-03-18 19:09:19
如果您在'$(document).load()'处理程序中进行初始化,而不是在“就绪”处理程序中,会发生什么?在加载所有图像(等)之前,“加载”事件不会被触发。 – Pointy 2012-03-18 18:52:56
@Pointy将'.ready'更改为'.load'会导致图像无法交换。他们只是加载在一个新的浏览器窗口。 – 2012-03-18 18:58:13
@ChaseFlorell - 它应该是'$(window).load()',而不是'$(document).load()',但我宁可怀疑这是问题。 – jfriend00 2012-03-18 19:06:59