Question

我的页面工作正常且突然，英雄图像未加载，我在wine-cheese.js控制台“ReferenceError：imagesLoaded未定义”中看到错误消息，其前面是另一个错误“错误：dojo.js上的“multipleDefine”自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>

Answer 1

我建议在他们的网络控制台上使用chrome / chromium或safari。然后，您可以打开Web检查器并将检查器设置为捕获所有错误。 Graphical Representation

那里的工具应该可以帮助你找出问题所在。

更新

查看您提供的链接，我看到问题出在imageloader.js调用上。它似乎是多次定义同一个对象。您可以尝试将其包装在js检查中。

更新2：

好的，所以我在jsfiddle中测试了你的脚本。我发现问题基于dojo和imagesloaded脚本之间的冲突。我设置了一个jsfiddle来测试脚本，看看是否定义了类imagesLoader。在左侧工具栏中，如果您在jQuery和Dojo框架之间更改左侧的设置，则imagesLoaded js脚本将停止工作。问题是，由于它是打包的，它不会发出错误信号。要么从头开始创建新脚本，要么找到替代方案。

if(!alreadyDefined) {
   alreadyDefined=true;
   //Rest of your code.
}

使用Firebug调试器解决脚本冲突

1 个答案:

更新

更新2：