Question

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

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

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

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

谢谢！〜丹尼尔

Answer 1

是。你可以拥有类似懒惰装载机的东西。

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

Answer 2

在DOM准备就绪后执行的函数。

代码示例：

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

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

Answer 3

没有代码，很难说。但是，我最好的猜测是，它正在等待文档加载，然后再引导您正在使用的灯箱。这对灯箱来说是正确的。

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

Answer 4

关于脚本的一个简单信息。始终将脚本放在身体标签下以便快速加载。如果您想要快速响应，请不要使用head标记。

Answer 5

@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; }