在屏幕上所有匹配的元素上运行href.replace

Question

Right now, I'm being forced to run my method on mouseover, which essentially changes part of the URL of matching links to something else. If I just hit all the elements on the entire page, I get a huge performance hit and even crashes. If I use the mouseover action, it doesn't function properly with a 3rd-party Chrome extension that it's intended to work with, but at least is stable.

Here's where I'm at:

$('body').on('mouseover', 'a', function(e) {
  e.preventDefault();
  if(this.href.match(/example.com/g)){
      this.href = this.href.replace('example.com', 'newexample.org');
  }
});

I'd like to, instead of executing this .replace on mouseover, instead take all example.com links and convert them when they're on screen, including as you scroll down. That way, it breaks up all the links into slightly more manageable chunks. That's the only way I can think of doing it without hitting all the page links at once and taking the performance hit.

Is it possible?

Answer 1

Install the jQuery Viewport extension from http://www.appelsiini.net/projects/viewport

Then you can use a scroll handler that does something like:

$('a:in-viewport[href*="example.com"]').each(function() {
    this.href = this.href.replace('example.com', 'newexample.org');
});