Loading jQuery in a blogger post causes it to freeze

问题

I've created some code which people can copy and paste into their websites, and it should work in blogspot. This code requires jQuery and the jCarousel plugin. I use

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

to load jQuery before running my javascript code. The issue is that some blogger templates load jQuery already, and then running the above code causes the blog post to never load (it just stays on the loading screen).

I could load it using javascript after if (typeof jQuery == "undefined") but for the jCarousel plugin to work jQuery must be loaded first, so this causes the post to load but the carousel to break.

Anybody know any solutions?

回答1:

Can't you check for the existence of jQuery and still load jCarousel after that?

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

On second thought, I am not convinced this will always work. I don't think this guarantees that jQuery will load before jCarousel. I came up with an alternate solution that seems to be more robust. It makes sure that jQuery is loaded, and then uses jQuery to load the library using $.getScript(). Then your code is called from the callback of getScript. This ensures that everything happens in the proper order:

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

Demo: http://jsfiddle.net/jtbowden/Y84hA/2/

(Change the Framework in the left column to any version of jQuery, or some other library. It should always load the carousel correctly)

Edit:

This version is similar, but uses a <head> load for the lib, just like for jQuery. It is faster than $.getScript():

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

来源：https://stackoverflow.com/questions/10319728/loading-jquery-in-a-blogger-post-causes-it-to-freeze

标签

javascript