Question

我的网站上有这样的东西，让垃圾邮件收集者的工作变得更加困难。默认情况下，该网站显示“noob（at）me（dot）com”，但JavaScript会将此文本替换为实际的电子邮件地址。

<span id="email">noob (at) me (dot) com</span>

<script type="text/javascript" src="email.js"></script>
<script type="text/javascript">
  document.getElementById('email').innerHTML = emailProducingFunction();
</script>

这很有效。然而，问题在于，有时候，在JS转向真实电子邮件之前，原始文本会暂时显示，导致网站加载时出现短暂的“闪烁”效果。

有可能以某种方式避免这种情况吗？

一个“解决方案”是使用CSS隐藏电子邮件元素，然后使用JS将其取消隐藏。但是，这不是一个好的解决方案，因为该站点还应该与已启用CSS但已禁用JS的浏览器兼容。

Answer 1

除了解决你的闪烁问题，我可以提出一些不会遭受同样现象的事情。

电子邮件混淆的替代方法

您是否考虑过有价值的替代方案，例如撤消电子邮件地址，然后使用CSS正确显示错误，而不是减轻闪烁？这种技术在屏幕阅读器和复制粘贴方面可能不是最好的，但还有一些值得使用的工作与你的不同。

Check this answer on Superuser

此答案总结了this study有关不同电子邮件混淆技术的内容。 CSS逆转似乎是最有效的之一。

使用CSS反转和可点击性/选择

因此，您的技术会使用Javascript替换加载页面上的所有电子邮件。 CSS解决方案正确显示反向电子邮件，但如果有人会点击这样的电子邮件或选择它（复制），他们会收到反向的电子邮件。

因此，使用CSS并改进这些日常场景可以通过使用javascript来完成，这是一个与你类似的解决方案，只是它只按需执行（并不总是如你所说）。将click / select事件附加到元素并在需要时反转其内容很容易。

我想说的是，即使使用CSS混淆，也不会降低其网站的可用性。它仍然可以完成。

Answer 2

这种闪烁的发生是因为显示了原始地址，加载了email.js脚本，然后应用了该功能。文件加载+函数执行留下足够的时间来发生闪烁。

解决方案是在显示原始地址之前放置脚本标记。但是，如果您只是尝试使用#email元素，则会收到错误，因为它不存在。因此，您可以使用DOMContentLoaded事件来等待元素存在。（$(document).ready()如果你习惯了jQuery。）

使用这种方式，不会有任何闪烁。

示例：

<script src="email.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('email').innerHTML = emailProducingFunction();
}, false);
</script>

<span id="email">noob (at) me (dot) com</span>

Answer 3

您可以在页面开始加载时向js元素添加body类：

<body>
  <script>document.body.className += " js";</script>
  <style>body.js #email {display: none;}</style>

因此确保“混淆”地址仅显示给“非JS”用户。

Answer 4

将<{1}}元素移动到之前电子邮件元素：

<script>

Answer 5

以下是有关Flash of unstyled content (FOUC);

的一些资源

http://paulirish.com/2009/avoiding-the-fouc-v3/

http://www.bluerobot.com/web/css/fouc.asp/

http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

使用innerHTML替换元素内容时避免闪烁

5 个答案:

电子邮件混淆的替代方法

使用CSS反转和可点击性/选择