在博客文章中加载jQuery导致其冻结 [英] Loading jQuery in a blogger post causes it to freeze
问题描述
我创建了一些代码，人们可以将其复制并粘贴到他们的网站中，并且该代码应该可以在blogspot中使用.此代码需要jQuery和jCarousel插件.我用
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>
在运行我的JavaScript代码之前加载jQuery.问题是某些博客模板已经加载了jQuery，然后运行上面的代码将导致该博客帖子从不加载(仅停留在加载屏幕上).
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).
我可以在if (typeof jQuery == "undefined")之后使用javascript加载它，但是要使jCarousel插件正常工作，必须首先加载jQuery，因此这会导致帖子加载但轮播会中断.
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?
推荐答案
您是否无法检查jQuery的存在并在此之后仍然加载jCarousel?
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>
再三考虑，我不认为这将一直有效.我不认为这可以保证jQuery将在jCarousel之前加载.我想出了另一种似乎更可靠的解决方案.它确保已加载jQuery，然后使用jQuery通过$.getScript()加载库.然后，从getScript的回调中调用您的代码.这样可以确保一切按正确的顺序进行:
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>
演示: http://jsfiddle.net/jtbowden/Y84hA/2/
(将左栏中的Framework更改为jQuery的任何版本，或其他一些库.它应该始终正确加载轮播)
(Change the Framework in the left column to any version of jQuery, or some other library. It should always load the carousel correctly)
修改:
此版本与此类似，但对lib使用<head>加载，就像对jQuery一样.它比$.getScript()快:
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/
这篇关于在博客文章中加载jQuery导致其冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
