0

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

为了加快 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 与 $ 变量的冲突而引发了此错误，但这与我的知识范围有关。

有任何想法吗？

4

2 回答 2

0

根据 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不会被识别。

于 2013-10-10T09:35:06.347 回答
0

好吧，您似乎在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>
于 2013-10-10T09:39:22.827 回答