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

ここには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>
于 2013-10-10T09:39:22.827 に答える