Question

我创建了一些人们可以复制并粘贴到他们网站的代码，它应该在blogspot中工作。此代码需要jQuery和jCarousel插件。我用

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

在运行我的javascript代码之前加载jQuery。问题是一些博客模板已经加载了jQuery，然后运行上面的代码导致博客文章永远不会加载（它只是停留在加载屏幕上）。

我可以在if (typeof jQuery == "undefined")之后使用javascript加载它但是为了使jCarousel插件工作，必须首先加载jQuery，因此这会导致帖子加载但轮播要中断。

有人知道任何解决方案吗？

Answer 1

你能不能检查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或其他一些库。它应该始终正确加载轮播）

修改：

此版本类似，但对lib使用<head>加载，就像jQuery一样。它比$.getScript()：
快
http://jsfiddle.net/jtbowden/y8nGJ/1/

在博客帖子中加载jQuery会导致它冻结

1 个答案: