加载多个jQuery的版本

问题描述:

我已经写了使用jQuery的一个工具,该工具在许多不同的网页动态加载,包括那些已经使用jQuery。我试图加载jQuery的一个网页,是出于我的直接控制上。当我这样做,Ajax调用该页面通过jQuery停止工作做。该网站,dailycaller.com,使用jQuery的懒图像加载 - 当你向下滚动页面,文章图像动态加载。当我尝试加载任何jQuery的版本,这个动态影像获取中断。我怀疑这是由于网页本身对我的加载jQuery和jQuery的之间的版本冲突了。

I've written a tool that uses jQuery, and the tool is dynamically loaded on many different web pages, including ones that already use jQuery. I am trying to load jQuery on a web page that is out of my direct control. When I do so, Ajax calls that this page makes via jQuery stop working. The site, dailycaller.com, uses jQuery lazy image loading - when you scroll down the page, article images are dynamically loaded. When I attempt to load any jQuery version, this dynamic image fetching breaks. I suspect this is due to a version conflict between my loaded jQuery and the jQuery already on the page itself.

要测试这一点,我尝试加载相同版本的页面一样。该页面包含一个脚本标签

To test this, I tried loading the same version as the page does. The page includes a script tag

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

我的JS code加载这个版本试(异步,在页面加载后),以

My JS code loads this version again (asynchronously, after the pageload), with

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不打破这个页面的动态负载?

Even though this version of jQuery is, in theory, already on the page, this load causes the page's jQuery Ajax calls to break. How can I load an arbitrary jQuery version without breaking this page's dynamic loads?

我用jQuery.noConflict()试图为这里推荐Can我使用多个版本的jQuery的同一页上?的,它并没有解决这个问题。

I have tried using jQuery.noConflict() as recommended here Can I use multiple versions of jQuery on the same page? and it doesn't solve this issue.

您需要允许的jQuery的动态加载的副本之前调用完成加载 .noConflict()。使用的onload 活动的&LT;脚本&GT;

You need to allow the dynamically loaded copy of jQuery to finish loading before calling .noConflict(). Use the onload event on <script>.

演示:

Demo:

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