1

人々が自分の Web サイトにコピーして貼り付けることができるいくつかのコードを作成しました。これは blogspot で動作するはずです。このコードには、jQuery と jCarousel プラグインが必要です。私が使う

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

私のjavascriptコードを実行する前にjQueryをロードします。問題は、一部のブロガー テンプレートが既に jQuery を読み込んでいて、上記のコードを実行すると、ブログの投稿が読み込まれない (読み込み画面にとどまる) ことです。

後でjavascriptを使用してロードできますif (typeof jQuery == "undefined")が、jCarouselプラグインが機能するにはjQueryを最初にロードする必要があるため、投稿はロードされますが、カルーセルは壊れます。

誰でも解決策を知っていますか？

4

1 に答える 1

5

jQuery の存在を確認して、その後も jCarousel をロードすることはできませんか?

<script type="text/javascript">
    if (typeof jQuery === "undefined") {  
        document.write('<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"><\/script>');
    }
</script>

<script src="http://path/to/jcarousel" type="text/javascript"></script>

考え直して、これが常に機能するとは確信していません。これは、jQuery が jCarousel の前にロードされることを保証するとは思いません。より堅牢な代替ソリューションを思いつきました。jQuery がロードされていることを確認してから、jQuery を使用してライブラリをロードします$.getScript()。次に、コードが のコールバックから呼び出されますgetScript。これにより、すべてが適切な順序で行われます。

<script type="text/javascript">
    if (typeof jQuery !== "undefined") {
        loadLibs();
    } else {
        var script = document.createElement('script');
        script.src = 'http://code.jquery.com/jquery.js';
        document.getElementsByTagName('head')[0].appendChild(script);
        var timeout = 100; // 100x100ms = 10 seconds
        var interval = setInterval(function() {
            timeout--;
            if (window.jQuery) {
                clearInterval(interval);
                loadLibs();
            } else if (timeout <= 0) {
                // jQuery failed to load
                clearInterval(interval);
            }
        }, 100);
    }

    function loadLibs() {
        $.getScript("http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js", function(data, textStatus, jqxhr) {
            myCode();
        });
    }

    function myCode() {
        $(document).ready(function() {
            $('#mycarousel').jcarousel();
        });
    }
</script>

デモ: http://jsfiddle.net/jtbowden/Y84hA/2/

(左側の列のフレームワークを任意のバージョンの jQuery または他のライブラリに変更します。常にカルーセルを正しくロードする必要があります)

編集：

このバージョンは似ていますが、<head>jQuery の場合と同様に、lib のロードを使用します。よりも高速です$.getScript():

http://jsfiddle.net/jtbowden/y8nGJ/1/

于 2012-04-25T16:26:45.320 に答える