我的页面工作正常，突然之间，没有加载英雄图像，并且在wine-cheese.js上的控制台中看到一条错误消息“ ReferenceError：imagesLoaded is not defined”，该错误消息之前是另一个错误“ Error：multipleDefine”在dojo.js上。自从6周前发布内容以来，我还没有更改过文件。
一些外部开发人员已经在网站上进行了一些工作，我相信他们引入了冲突。但是我很困惑如何解决这个问题。我尝试在Firebug中设置断点，但这对我没有帮助，因为我不确定自己在做什么。我发现的所有关于如何使用调试器的教程都集中于页面中的一个脚本，而不是调试CMS组成的页面并与您无法控制的许多其他脚本合并。
当我在本地检查内容时，一切正常（我使用绝对链接来引用所有脚本和文件，以确保它们确实在服务器上），因此我认为与dojo或什至其他冲突。
我整天都在试图解决这个问题，感觉就像我在转圈。
任何帮助或建议，将不胜感激。有问题的页面是here。
这是导致错误的javascript文件中的代码。我工作的网站具有jQuery 1.3.2，因此我们必须使用noConflict并行运行更新的库（因此jwc）
$.fn.tabs = function() {
return this.each(function() {
var $el = $(this);
var $panels = $el.find('> div');
var $tabs = $el.find('> ul a');
$tabs.click(function() {
setTimeout(function() {
if (window.location.hash) {
window.scrollTo(0, 489);
}
}, 1);
$tabs.removeClass('active');
$(this).addClass('active');
$panels.fadeOut(250);
$panels.filter(this.hash).animate({
opacity:1},
250, 'linear', function(){
$(this).show();
});
animateHeader(this.hash);
//window.location.hash = this.hash;
//return false;
});
if(window.location.hash != 'undefined' && window.location.hash != '') {
//alert(window.location.hash);
tabId = '[href*="' + window.location.hash + '"]';
$tabs.filter(tabId).click();
} else {
$tabs.filter('[href*="#party-tips"]').click();
}
});
};
jQuery.easing.def = "easeInCubic";
function animateHeader(tab) {
if (tab == "#party-tips") {
$('#party-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#party-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#pairing-guide") {
$('#pairing-guide #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#pairing-guide #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#quick-tips") {
$('#quick-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#quick-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
}
}
function laodAnimation() {
imagesLoaded('img#sipbg', function(){
$('#loadblock').hide();
$('img#sipbg').animate({
opacity:1
}, 250, 'linear');
$('#top-block').delay(250).animate({
top:0
}, 350, 'swing', function(){
$('h1#wc-logo').animate({
top:30,
left:84
}, 750, 'linear', function(){
$('span#wine-glass').animate({
top:105,
left:136
}, 500, 'swing', function(){
$('span#text-sip').fadeIn(250, function(){
$('span#text-savor').delay(500).fadeIn(250, function(){
$('span#text-repeat').delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$('span##text-endless').delay(500).fadeIn(350);
$('#bottom-block').animate({
bottom:0
}, 350, 'swing', function() {
$('#bottom-block h1').delay(350).fadeIn(750);
});
});
});
});
});
});
});
});
});
});
});
$('#main-grid').delay(400).animate({
opacity:1
}, 1200, 'linear');
});
}
我插入CMS的内容的第一部分如下所示： imagesLoaded在第二个脚本中定义：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/jquery.fancybox.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/retina.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/wine-cheese.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53d6affc389982ed"></script>
<script type="text/javascript">
var jwc = jQuery.noConflict(true);
jwc(document).ready(function() {
jwc("a#box").fancybox({
maxWidth : 800,
maxHeight : 680,
fitToView : true,
width : '70%',
height : '90%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
laodAnimation();
});
</script>
最佳答案
我建议将chrome / chromium或safari用作其网络控制台。然后，您可以打开Web检查器并设置检查器以捕获所有错误。
那里的工具应该可以帮助您找出问题所在。
更新：
查看您提供的链接，我发现问题出在imageloader.js调用上。它似乎多次定义同一对象。您可以尝试将其包装在js检查中。
更新2：
好的，所以我在jsfiddle中测试了您的脚本。我发现问题是由于dojo和imagesloaded脚本之间的冲突引起的。我设置了一个jsfiddle来测试脚本，以查看是否定义了imagesLoader类。在左侧工具栏中，如果您在jQuery和Dojo框架之间更改了左侧的设置，则imagesLoaded js脚本将停止工作。问题在于，由于已打包，因此不会发出错误信号。您可以从头开始制作新脚本，也可以找到其他脚本。
if(!alreadyDefined) {
alreadyDefined=true;
//Rest of your code.
}
关于javascript - 使用Firebug调试器解决脚本冲突，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26661685/