Avoid flickering when replacing element content using innerHTML

Question

I have something like this on my site, to make things a bit more difficult for spam harvesters. By default the site shows "noob (at) me (dot) com", but then JavaScript replaces this text with the actual email address.

<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>

This works. However, the problem is that sometimes, the original text is shown for a split second before JS turns to the real email, causing a brief "blinking" effect when the site loads.

Is it possible to avoid this somehow?

One "solution" is to have the email element hidden using CSS, and then use JS to make it unhidden. However, this is not a good solution because the site should also be compatible with browsers that have CSS enabled but JS disabled.

Answer 1

This flickering happens because the original address is shown, the email.js script is loaded, then the function is applied. The file loading + function execution leaves enough time for the flickering to happen.

The solution is to put the script tags before the original address is shown. However, if you just try to use the #email element, you'll get an error because it doesn't exist. So you can use the DOMContentLoaded event to wait for the element to exist. ($(document).ready() if you're used to jQuery.)

Using this way, there won't be any flickering.

Example:

<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 2

Instead of resolving your flickering issue may I propose something else that doesn't suffer from the same phenomenon.

Alternatives to email obfuscation

Instead of mitigating flickering have you ever considered worthy alternatives like reversing email addresses and then using CSS to show them correctly? This technique may not be best in terms of screens readers and copy-pasting, but there are others worth using that work differently to yours.

Check this answer on Superuser

This answer summs up this study about different email obfuscation techniques. CSS reversing seems to be one of the most effective ones.

Using CSS reversing and clickability/selection

So your technique replaces all emails on your page on load using Javascript. CSS solution correctly displays reversed emails but if one would then click such an email or selec it (for copy) they'd get a reversed email back.

So using CSS and improving these everyday scenarios can be done by using javascript which is a similar solution to yours except that it only executes on demand (and not always as in your case). It's easy to attach a click/select event to an element and reverse its content when required.

What I'm trying to say is that even when using CSS obfuscation one may not lower usability of their website. It can still be done.