页面加载时出现 404 错误答案

【问题标题】：404 error on page load页面加载时出现 404 错误
【发布时间】：2012-02-23 08:37:45
【问题描述】：

this page 加载时，Firebug 中会出现以下内容：

NetworkError: 404 Not Found - http://summer-festivals.cloudfoundry.com/undefined

我已将错误追踪到呈现轮播的JQuery plugin。如果我删除这个插件和调用它的代码，错误就会消失。

但是，我无法弄清楚插件试图检索导致错误的原因。轮播本身使用的所有图像（例如，用于上一个、下一个、暂停按钮），以及轮播显示的图像都能正确加载，我想不出它还试图下载什么。

【问题讨论】：

我从 undefined 猜测它正在尝试使用某个未定义的属性来形成一个 url 或类似的东西。某处的数组中没有空条目或长度指示符不正确（例如，当您只有 9 个图像时说您有 10 个图像）是否存在？很明显的想法，但你可能没有想到它们......
@Chris 可能是这样的，但是错误信息没有给出行号而且我没有写插件，所以我真的不知道从哪里开始
该站点上似乎还提供了该插件的更新版本。您可能也想测试一下。
@j08691 我测试了较新的版本，但它也会生成 404，即使在插件自己的演示页面上也是如此 catchmyfame.com/jquery/infinitecarousel3/demo/d1.html
根据 Chrome 的网络工具，看起来 404 可能来自丢失的 wait.gif（wait.gif /jquery/infinitecarousel3/demo/images GET 404 Not Found）。似乎在加载轮播图像时将 wait.gif 用作背景图像。您可能可以将其从插件中删除，也可以使用您自己的。

标签： javascript jquery http-status-code-404

【解决方案1】：

在调用所有资源之前，尝试将主库调用放在标题标签中。

这些都应该仍然在您的标题中。您的文档 ready() 内容可以保留在页脚中。看看这是否能解决您的问题。

<script src="/static/js/namespace.js" type="text/javascript" ></script>
<script src="/static/js/global.js" type="text/javascript" ></script>
<script src="/static/js/slide.js" type="text/javascript" ></script>
<script src="/static/js/superfish/hoverIntent.js" type="text/javascript" ></script>
<script src="/static/js/superfish/superfish.js" type="text/javascript" ></script>
<script src="/static/js/superfish/supersubs.js" type="text/javascript" ></script>
<script src="/static/js/tablesorter/jquery.tablesorter.min.js" type="text/javascript" ></script>
<script src="/static/js/tablesorter/jquery.metadata.js" type="text/javascript" >  </script>
<script src="/static/js/tablesorter/init.js" type="text/javascript" ></script>
<script src="/static/js/jquery.simplemodal.1.4.2.min.js" type="text/javascript" >     </script>
<script src="/static/js/carousel/jquery.infinitecarousel2-thumbmod-1.js" type="text/javascript" ></script>

【讨论】：

【解决方案2】：

在做了一些调试之后（都称赞 firebug），我将其范围缩小到从第 175 行开始的 for 循环：

for(i=0;i<=numImages-1;i++)
{
thumb = $('img:eq('+(i+1)+')', obj).attr('src');
// $('#thumbs'+randID).append('<div class="thumb" id="thumb'+randID+'_'+(i+1)+'" style="cursor:pointer;background-image:url('+thumb+');display:inline;float:left;width:'+o.thumbnailWidth+';height:'+o.thumbnailHeight+';line-height:'+o.thumbnailHeight+';padding:0;overflow:hidden;text-align:center;border:2px solid #ccc;margin-right:4px;font-size:'+o.thumbnailFontSize+';font-family:Arial;color:#000;text-shadow:0 0 3px #fff">'+(i+1)+'</div>');
$('#thumbs'+randID).append('<div class="thumb" id="thumb'+randID+'_'+(i+1)+'" style="cursor:pointer;display:inline;float:left;width:'+o.thumbnailWidth+';height:'+o.thumbnailHeight+';padding:0;overflow:hidden;text-align:center;border:2px solid #ccc;margin-right:4px;font-size:'+o.thumbnailFontSize+';font-family:Arial;color:#000;text-shadow:0 0 3px #fff"><img src="'+thumb+'" width="'+o.thumbnailWidth+'" height="'+o.thumbnailHeight+'" alt="" /></div>');
// $('#thumbs'+randID).append('<div class="thumb" id="thumb'+randID+'_'+(i+1)+'" style="cursor:pointer;display:inline;float:left;width:'+o.thumbnailWidth+';height:'+o.thumbnailHeight+';padding:0;overflow:hidden;text-align:center;border:2px solid #ccc;margin-right:4px;font-size:'+o.thumbnailFontSize+';font-family:Arial;color:#000;text-shadow:0 0 3px #fff"><img src="thumbnail.php?i='+thumb+'&w='+o.thumbnailWidth+'&h='+o.thumbnailHeight+'&q=100" alt="" /></div>');
if(i<=o.inView) $('#thumb'+randID+'_'+i).css({'border-color':'#ff0000'});
unviewable.push(i+1);
}

似乎出错的结果在选择器中的i+1 中。 obj 是 div#carousel，这有 9 张图片（numImages 正确设置为 9 张）。

但是，选择器从 1 循环到 9，而我认为它应该从 0 循环到 8（只需在监视窗口中粘贴东西）。这意味着当它开始评估$('img:eq(9)', obj) 时，它什么也得不到，所以 src 属性是“未定义的”。然后它会尝试添加一个带有“未定义”的图像作为 src，它是出错的地方。

这看起来像是轮播代码中的一个错误，所以我可能会建议尝试与他们讨论一下。您可以通过将 i+1 替换为 i 来修复它，但我对此不提供任何保证。 :)

【讨论】：

干得好，现在我大致知道错误在哪里，希望我能修复它。知道为什么 Firebug 没有指出错误的行号吗？
我不知道，恐怕。我只是通过逐步检查各个位直到出现错误然后跳入那段代码并重复来找到它。我唯一能想到的是它在匿名函数中，所以也许 JS 引擎忘记了它们最初来自哪里。那种事情虽然在我头上。 :)