在我的网站上,我有一个
jquery函数,一旦页面加载就从另一个(安全的)服务器检索数据.使用jsonp调用我当前在文档就绪事件后加载此数据：
<script type="text/javascript">
$(document).ready(function () {
$.getJSON(_secureHost + '/base/members/current.aspx?callback=?',function (data) {
initPage(data);
});
});
</script>
我不喜欢上面的调用,是jsonp实际上可以在文档就绪事件之前被执行,从而减慢页面加载速度.因此,如果我在页面中包含jquery(即不使用脚本标记引用),则以下代码工作正常并且页面加载速度更快：
<script type="text/javascript">
$.getJSON(_secureHost + '/base/members/current.aspx?callback=?',function (data) {
$(document).ready(function () {
initPage(data);
});
});
</script>
但是在每个页面中包含jquery是一个23k的开销,我想避免.我如何测试是否已加载jquery,并且只有在加载jquery时才执行initPage()函数？
编辑：
更确切地说,如果加载了jquery,我需要反复检查,然后执行该事件.计时器工作可能是解决方案..
解：
我创建了一个执行jquery检查的preinit.我的页面加载速度不快:).感谢大家！
function preInit()
{
// wait until jquery is loeaded
if (!(typeof jQuery === 'function')) {
window.setTimeout(function () {
//console.log(count++);
preInit();
},10); // Try again every 10 ms..
return;
}
$.getJSON(_secureHost + '/base/members/current.aspx?callback=?',function (data) {
$(document).ready(function () {
initPage(data);
});
});
}
解决方法
我想你可以用
if (jQuery) {
...
}
查看jQuery对象是否存在.
好的,更好的是：
if (typeof jQuery !== 'undefined') {
...
}
要么
if (typeof jQuery === 'function') {
...
}
编辑：
不要担心开销或是否加载了jQuery对象.如果你只是使用常规的< script src =“...”>来包含jQuery库.标记,然后执行你的代码没有$(document).ready,像这样：
<script type="text/javascript">
$.getJSON(_secureHost + '/base/members/current.aspx?callback=?',function (data) {
initPage(data);
});
</script>
它会工作. $(document).ready部分只是为了确保DOM在您尝试更改尚未加载的DOM元素之前已完全加载. jQuery库本身,包括Ajax功能,将立即存在.
现在,如果你的initPage(数据)调用使用了DOM,我认为它可以,你可以检查一下,如下所示：
<script type="text/javascript">
function initPage(data) {
var $domObject = $('#your-dom-object');
if ($domObject.length === 0) { // Dom object not loaded yet.
window.setTimeout(function() {
initPage(data);
},0); // Try again after other stuff has finished.
return;
}
// Do your regular stuff here.
}
</script>
但是,我不认为在大多数情况下这是必要的.