四种选择供您选择:
Option 0
Go read 肖恩·霍根的回答 https://stackoverflow.com/questions/3811513/preventing-links-before-jquery-is-loaded/3811984#3811984,他指出这可以通过授权来完成(doh!)并且我整理了一个示例实现。
Option 1
你可以使href
链接“#”直到加载 jQuery,然后(如果适用)将其更改为真正应该的内容。您可以存储什么href
应该在一个data-
属性,例如:
<a href='javascript:;' data-href='realtarget.html'>blah</a>
Then:
jQuery(function($) {
$("a[data-href]").each(function() {
var $this = $(this);
$this.attr("href", $this.attr("data-href"));
});
});
再说一遍,最后一点仅当您确实需要将 href 设为 href 时。如果您通过 JavaScript 处理点击,则无需这样做。
如果验证是开发周期的重要组成部分,请务必注意表单中的属性data-xyz
在 HTML4 及之前的版本中无效(浏览器实际上并不关心,但同样,如果您使用验证......)。它们从 HTML5 起生效。
Option 2
使用内联onclick
属性在 jQuery 加载之前拦截点击,基本上是说“抱歉,稍等一下”。所以在一个script
标记在top你的文件:
function sorryLoading() {
alert("Sorry, the page is still loading, one moment please.");
return false;
}
...然后在链接上:
<a href='realtarget.html' class='sorry' onclick='return sorryLoading();'>blah</a>
...然后删除onclick
在 jQuery 加载上:
jQuery(function($) {
$("a.sorry").removeClass('sorry').attr("onclick", "").click(yourRealClickHandler);
});
(你可以留下最后一点——click
调用 - 如果它们不都具有相同的点击处理程序,则关闭。)
我使用上面的类来区分这些链接和其他可能具有内联的链接onclick
(否则,令人惊讶的是,选择器“a[onclick]”实际上适用于 Linux 上的 Chrome、Opera 和 Firefox 以及 Windows 上的 IE6 和 IE8)。
Option 3
因为听起来您希望页面在 jQuery 加载之前不起作用,所以这是另一种方法:
- 确保 jQuery 的脚本标签位于
head
页面的部分(不是在底部,我通常建议将其放在底部)。
- 在页面的最底部,就在关闭之前
body
标记,连接您的点击处理程序without将它们包裹在一个jQuery.ready
调用(或其任何快捷方式)。
原因是这样的:#1 将确保 jQuery 本身在页面渲染之前加载,#2 将连接处理程序尽快地。 Google 建议在页面末尾使用这样的标签(而不是ready
函数或类似的函数)并表示此时 DOM 元素将准备好被发现。
当然,您还需要单独确保链接不执行用户期望的操作的时间是绝对尽可能简短通过做所有你能做的页面加载优化工作。单击链接而不让它执行其看起来的操作会导致糟糕的用户体验。