javascript - 只有在 javascript 加载后，链接才应变为可点击

Question

我有一个“登录”链接，可在灯箱式 iframe 中打开登录页面 (login.php)。

通常它工作正常，但是如果观众的互联网连接非常慢，他们可能会在灯箱 javascript 加载之前点击登录链接。然后导致 login.php 在窗口本身而不是灯箱 iframe 中加载，这是一个问题。

那么，是否可以延迟该链接的点击能力，直到特定的 .js 文件加载之后？即当页面第一次加载时，“登录”是不可点击的，然后在 javascript 加载后，“登录”成为一个活动链接。

或者 - 这个问题的最佳解决方案是什么？

谢谢！~丹尼尔

score 2 · Accepted Answer

是的。你可以有一个惰性加载器之类的东西。

<a href="#" data-href="login.php" class="lazy">log in</a>

现在，具有该类的元素lazy将具有一个虚拟的非工作链接。窗口加载后，我们将替换正确的链接，使其正常工作。

$(document).ready(function(){
  $('.lazy').removeClass('lazy').attr('href', $(this).data('href'));
});

此外，如果您觉得这可能是一个问题，您可以隐藏登录按钮并在文档加载后显示它，如下所示：

<a id="login" ... style="display: none;">Login</a>

和 JavaScript：

$(document).ready(function(){
  $('#login').show();
});

score 1 · Accepted Answer

DOM 准备好后执行的函数。

代码示例：

$(document).ready(function() {
    var login = $("<a href='login.php' >Login</a>");
    $('#elementName').append(login);
});

或者 if (typeof something != 'undefined')在做任何事情之前检查是否存在。

score 0 · Accepted Answer

没有代码很难说。但是，我最好的猜测是它在引导您正在使用的灯箱之前等待文档加载。这是该灯箱要做的正确事情。

正如@Matt Ball 在您的帖子中的评论所建议的那样，您需要有一个非 javavascript 选项，该选项在页面加载时替换为更漂亮的 javascript 选项。

score 0 · Accepted Answer

关于脚本的一个简单信息。总是把你的脚本放在你的 body 标签下以便快速加载。如果您想要快速响应，则不在 head 标签中。

score 0 · Accepted Answer

@Praveen Kumar 的解决方案有效，但这是一种更简单的方法，不需要真正“延迟加载”链接：

HTML：

<a href="login.php" class="lazy">log in</a>

JS（在加载灯箱后将其添加到您的灯箱脚本中）：

$('.lazy').removeClass('lazy');

或者没有 jQuery（简化示例）：

document.querySelectorAll('.lazy')[0].className='';

CSS：

.lazy { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }

5 回答 5