使用innerHTML替换元素内容时避免闪烁
我在我的网站上有这样的东西，让垃圾邮件收集器的事情变得更加困难。默认情况下，网站会显示"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隐藏email元素，然后使用JS将其取消隐藏。但是，这不是一个好的解决方案，因为站点还应该与启用了CSS但禁用了JS的浏览器兼容。
回答 5
Stack Overflow用户
发布于 2012-11-12 18:36:51
为了不解决你的闪动问题，我可以提出一些不会出现相同现象的建议。
电子邮件混淆的替代方案
除了减少闪烁，你有没有考虑过有价值的替代方案，比如颠倒电子邮件地址，然后使用CSS正确地显示它们？就屏幕阅读器和复制粘贴而言，这种技术可能不是最好的，但还有其他值得使用的技术，与您的不同。
Check this answer on Superuser
此答案总结了有关不同电子邮件混淆技术的this study。CSS反转似乎是最有效的方法之一。
使用CSS反转和可点击性/选择
因此，您的技术将使用Javascript在加载时替换页面上的所有电子邮件。CSS解决方案正确地显示了反向电子邮件，但如果有人点击这样的电子邮件或选择它(为了复制)，他们会得到反向电子邮件。
因此，使用CSS并改进这些日常场景可以通过使用javascript来完成，这是一个与您的解决方案类似的解决方案，只是它只按需执行(并不总是像您的情况那样)。很容易将单击/选择事件附加到元素，并在需要时反转其内容。
我想说的是，即使使用CSS混淆，也不会降低网站的可用性。它仍然可以做到。
Stack Overflow用户
发布于 2012-11-12 18:42:58
之所以会出现这种闪烁，是因为显示了原始地址，加载了email.js脚本，然后应用了函数。文件加载+函数执行为闪烁的发生留下了足够的时间。
解决方案是将脚本标记放在显示原始地址之前。然而，如果你只是尝试使用#email元素，你会得到一个错误，因为它不存在。因此，您可以使用DOMContentLoaded事件等待元素存在。(如果您习惯于jQuery，请使用$(document).ready()。)
使用这种方式，将不会有任何闪烁。
示例：
<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>Stack Overflow用户
发布于 2012-11-12 18:37:35
当页面开始加载时，可以向body元素添加js类：
<body>
<script>document.body.className += " js";</script>
<style>body.js #email {display: none;}</style>从而确保“模糊”地址仅向“非JS”用户显示。
https://stackoverflow.com/questions/13342089
复制相似问题
腾讯云开发者
