加载多个jQuery版本

Question

我编写了一个使用jQuery的工具,该工具可以动态加载到许多不同的网页上,包括那些已经使用过jQuery的网页.我试图在一个不受我直接控制的网页上加载jQuery.当我这样做时,Ajax调用此页面通过jQuery停止工作.该网站dailycaller.com使用jQuery延迟图像加载 - 当您向下滚动页面时,文章图像是动态加载的.当我尝试加载任何jQuery版本时,此动态图像提取会中断.我怀疑这是由于我加载的jQuery和页面本身已经存在的jQuery之间的版本冲突.

为了测试这个,我尝试加载与页面相同的版本.该页面包含一个脚本标记

<script type='text/javascript' src='http://cdn01.dailycaller.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

我的JS代码再次加载此版本(异步地,在页面加载之后)

var script = document.createElement( 'script' );
script.src = 'http://cdn01.dailycaller.com/wp-includes/js/jquery/jquery.js?ver=1.7.2';
document.body.appendChild(script);

尽管理论上这个版本的jQuery已经在页面上,但这个加载会导致页面的jQuery Ajax调用中断.如何在不破坏此页面动态负载的情况下加载任意jQuery版本？

我已经尝试过使用jQuery.noConflict()这里推荐我可以在同一页面上使用多个版本的jQuery吗？它并没有解决这个问题.

Answer 1

您需要允许动态加载的jQuery副本在调用之前完成加载.noConflict().使用该onload事件<script>.

演示:

脚本:

var script = document.createElement( 'script' );
script.onload = function () {
    jQuery.noConflict( true ); //remove this and image load fails
};
script.src = 'http://cdn01.dailycaller.com/wp-includes/js/jquery/jquery.js?ver=1.7.2';
document.head.appendChild(script);