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

Loading jQuery in a blogger post causes it to freeze

本文关键字：冻结 jQuery 加载      更新时间：2023-09-26

我已经创建了一些代码，人们可以复制并粘贴到他们的网站中，它应该可以在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，所以这会导致帖子加载但轮播中断。

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

你不能检查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一样。 它比$.getScript()更快：

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

相关文章：