Hacker News new | ask | show | jobs
by jonnyscholes 3743 days ago
This should work:

  <input type="checkbox" />
  <div style="background-image: url('http://voting-url.com')"></div>

  div {
    display: none;
  }

  input:checked + div {
    display: block;
  }
A background-image won't be requested unless it is visible. (This is why lots of peoples on-hover icons flicker if they don't spritemaps, SVGS or iconfonts).

Edit: Obviously you'd style it to make it pretty :p

Edit 2: For accessibility you'd probably want a visibly hidden - but visible to screen readers - anchor that votes.

Edit 3: Looks like chrome pre-fetches things even when they're not visible now. Presumably to fix all those flickery icons out there :(