jQuery error in IE when loading scripts asynchronously using Head.js

Question

I have been trying to get the slider on a website to run for the past few hours and so far I have just been going around in circles.

In an attempt to speed up the page load of a Wordpress site I am attempting to load all my scripts asynchronously using head.js

Everything works ok in Firfox, Chrome etc but as per usual IE just isn't wanting to play ball. Heres a quick overview of what I have currently.

<!-- 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-->

The slider just wont appear on IE and using F12 (developer tools) in IE I keep getting

Object doesn't support this property or method

From the little I know about jQuery and what I have gleaned from extensive Googling I think it is throwing this error due to some sort of jQuery conflict with the $ variable however that is about the extent of my knowledge.

Any ideas?

Answer 1

Well it seems you are having two doc ready handlers here:

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

So here i suggest you to remove the inner one and do it like:

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

You can do this like below:

<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>