javascriptimageblink

Fastest way to make image blink --> so fast that you didn't see it


I'm looking for a way to make image blink so fast I cannot see it (and then avoid some screenshoting):

    var img = document.getElementsByTagName('img')[0];
    var i = true;

    setInterval(blink,10);
    
    function blink(){
        if(i){
            img.style.visibility="visible";
            i=false;
        }else{
            img.style.visibility="hidden";
            i=true;
        }
        
    }
    

But I still see the blink, and I think I could not lower than 10ms . I was thinking initially that below 24 f/s I would not notice it, but it doesn't seems to be the case.

What could I change to make it faster ? Is it even possible ?

Final target is to avoid screen shooting .


Solution

  • The standard refresh rate for monitors is 60Hz - 60 times per second. This is a hardware limitation - even with perfect software timing, there's no way to display frames more frequently than that - and humans paying attention to a screen can easily see something that appears for 1/60th of a second.

    Your only option is to have the image appear and disappear with every frame (which can be done more precisely than setInterval with requestAnimationFrame - but it'll still be visible to those watching closely).

    // Ensure browser is not busy
    setTimeout(() => {
      window.requestAnimationFrame(() => {
        document.body.classList.toggle('blue');
        window.requestAnimationFrame(() => {
          document.body.classList.toggle('blue');
        });
      });
    }, 1000);
    .blue {
      background-color: blue;
    }

    It's not possible for the monitor to display something for a low enough duration that it's not perceivable.