Question

我一直试图让网站上的滑块在过去的几个小时内运行，到目前为止，我一直在圈子里。

为了加速Wordpress网站的页面加载，我试图使用head.js异步加载我的所有脚本

在Firfox，Chrome等一切正常，但按照惯例，IE只是不想玩球。下面简要介绍一下我目前的情况。

<!-- within HEAD -->

    <script src="<?php bloginfo('stylesheet_directory'); ?>/js/head.js"></script>
    <script type="text/javascript">
            head.js(
            "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",
            "https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
            "<?php bloginfo('template_directory'); ?>/js/crosslide.js",
            "<?php bloginfo('stylesheet_directory'); ?>/js/mobile-cookies.js",
            "<?php bloginfo('stylesheet_directory'); ?>/js/superfish.js",
            "<?php bloginfo('stylesheet_directory'); ?>/js/hoverIntent.js",
            "<?php bloginfo('template_directory'); ?>/js/google-analytics.js",
            "<?php bloginfo('template_directory'); ?>/js/track-events.js"
            );
    </script>

<!---end HEAD -->

<!-- Within BODY wherever the slider should appear-->
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(function(){
            $('.fading').crossSlide({
                sleep: 4,
                shuffle: true,
                fade: 1
                }, [
                { src: 'http://www.example.co.uk/wp-content/themes/royalanlochan/images/Banner/1.jpg' },
                { src: 'http://www.example.co.uk/wp-content/themes/royalanlochan/images/Banner/2.jpg' }
            ]);
        });
    });
</script>
<!-- end BODY-->

滑块只是不会出现在IE上并且在IE中使用F12（开发者工具）我一直在

Object doesn't support this property or method

从我对jQuery的了解以及我从广泛的谷歌搜索中收集到的内容我认为由于某种jQuery与$ variable的冲突而引发此错误，但这与我的知识程度有关。

有什么想法吗？

Answer 1

根据head.js文档，您应该将自己的代码包装在回调函数中，如此

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // all done

});

在你的情况下，你可以像

那样做

<script type="text/javascript">
            head.js(
            "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",
            "https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
            myCallback
            );
</script>

<!-- before the end of body tag -->

<script>
function myCallback(){
    //your code goes here
}
</script>

否则，当浏览器执行您自己的代码时，无法保证已加载jquery.min.js，因此无法识别jQuery。

Answer 2

好像你这里有两个doc ready处理程序：

jQuery(document).ready(function ($) { $(function(){ ....  }); });
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^-------^^^^^^^^^^^^-----both are same

所以在这里我建议你删除内部的一个，然后像：

jQuery(document).ready(function ($) { ..your crossfade stuff here.. });

你可以这样做：

<script type="text/javascript">
    jQuery(document).ready(function ($) {

            $('.fading').crossSlide({
                sleep: 4,
                shuffle: true,
                fade: 1
                }, [
                { src: 'http://www.example.co.uk/wp-content/themes/royalanlochan/images/Banner/1.jpg' },
                { src: 'http://www.example.co.uk/wp-content/themes/royalanlochan/images/Banner/2.jpg' }
            ]);

    });
</script>

使用Head.js异步加载脚本时IE中的jQuery错误

2 个答案: